我正在尝试使用 Mithril.js 制作一个 SPA(单页应用程序)。到目前为止,我在这里找到了非常好的教程,当然在秘银主页上,但仍然无法实现这两者的结合。
这是戴夫指南中修改后的工作示例...
function btn(name, route){
var click = function(){ m.route(route); };
return m( "button", {onclick: click}, name );
}
function Page(content){
this.view = function(){
return [
m("page",
m("span", Menu.menu())
)
, m("div", content)
];
}
}
var Menu = {
menu: function(){
return [
btn("Home", "/home")
, btn("About", "/about")
];
}
};
var page_Home = new Page("The home of the Hobbits. Full of forests and marshes.");
var page_About = new Page(["The blighted home of Sauron. Scenic points of interest include:"]);
m.route(document.body, "/home", {
"/home": page_Home,
"/about": page_About
});
我的 JSON 文件:
[
{
"id":1,
"title": "Home",
"url": "/home",
"content":"This is home page"
},{
"id":2,
"title": "About",
"url": "/about",
"content":"This is about page"
},{
"id":3,
"title": "Galery",
"url": "/galery",
"content":"This is gallery page"
}
]
以及我从上面将这两者结合起来的努力:
//model
var PageSource = {
list: function() {
return m.request({method: "GET", url: "pages.json"});
}
};
var pages = PageSource.list();
var App = {
//controller
controller: function() {
return {
menu: pages
, rotate: function() { pages().push(pages().shift()); }
, id: m.route.param(pages.url)
}
},
//view
view: function(ctrl) {
return [
m("header"
, m("h1", "Page Title")
, m("span",
ctrl.menu().map(function(item) {
var click = function(){
console.log (item.url);
m.route(item.url);
};
return [
m("button", {onclick: click}, item.title)
];
})
)
, m("hr")
)
, m("button", {onclick: ctrl.rotate}, "Rotate links" )
, m("p", ctrl.content ) //CONTENT
];
}
};
//initialize
m.route(document.body, "/home", {
"/:id": App
});
最后,问题是:-“如何从 JSON 文件中检索数据并根据所选按钮(路由)将其显示在 div 中?” - “当我使用 m.route 时,我的整个视图都会刷新,但我只想重新加载更改的 div。如何?” 请帮忙,因为到目前为止我真的很喜欢 mithril.js