Mithril 是一个小巧的高性能 JavaScript MVC 框架,著名的开源论坛程序Flarum的前端使用的就是 Mithril,Mithril 的 API 极其简洁。我们可以使用 Mithril 直接通过 WordPress Rest API 调用 WordPress 的数据。下面我们直接用调用 WordPress 文章的例子说明一下具体的方法。
使用Mithril MVC 通过 WordPress Rest API 获取 WordPress 文章
var posts = {};
//model 模型,使用 Ajax 方法获取 WordPress 文章
var Post = {
list: function () {
return m.request({
method: "GET",
url: "/wp-json/wp/v2/posts/"
});
}
};
//controller 控制器,在 model 和 view 之间传递数据
posts.controller = function () {
var posts = Post.list();
return {
posts: posts
}
};
//view 视图,渲染数据
posts.view = function (ctrl) {
return m("div.list-group", [
ctrl.posts().map(function (post) {
return m("a.list-group-item", {href: '#single/' + post.id}, [
m("h4.list-group-item-heading", post.title.rendered),
m("p.list-group-item-text", m.trust(post.excerpt.rendered))
]
);
}),
m.component( title, {data: "所有文章"})
]);
};
通过 m.route配置路由
有了上面的应用,数据还显示不了,通过m.route路由把应用挂载到页面上就可以了。下面代码做的工作就是把上面应用的数据显示到 id 为 ucenter 的 DOM 上。
m.route.mode = "hash";
m.route(document.getElementById("ucenter"), "/", {
"/": posts
});
上面是最简单的 Mithril MVC 框架结合 WordPress Rest API 的使用方法,一眼看上去,咋感觉这么麻烦呀!其实 Rest API 的方便之处在于把前端代码和后端分离开了,后端只需要提供好接口,前端想怎么玩都可以,对于小型应用,这可能看不出来什么优势,对于大型应用,这能使代码结构更清晰,更方便维护。