如何使用 JSON 源创建 Mithril.js SPA？答案

【问题标题】：How to create Mithril.js SPA with JSON source?如何使用 JSON 源创建 Mithril.js SPA？
【发布时间】：2016-02-14 21:01:39
【问题描述】：

我正在尝试使用 Mithril.js 制作一个 SPA（单页应用程序）。到目前为止，我找到了很好的教程here，当然还有Mithril homepage，但仍然无法实现这两者的结合。

这是 Dave 指南中修改后的工作示例...

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

【问题讨论】：

标签： javascript json url-routing single-page-application mithril.js

【解决方案1】：

你已经接近了。

您的路由器似乎配置了两次，后一个声明将覆盖第一个声明。使用 m.route 声明一次路由，并在声明其他代码之后。
当您尝试在 App 视图中引用 ctrl.content 时，它将未定义，因为您尚未在 App 控制器中定义内容属性。将您想要的内容属性添加到 App 控制器返回的对象中。

【讨论】：

感谢您的快速回答。尽管它对我有所帮助，但我仍然无法在不刷新整个视图的情况下更改 url 和 div。

【解决方案2】：

感谢@dcochran，我成功实现了这一目标：

//model
var PageSource = {
  list: function() {
    return m.request({method: "GET", url: "pages.json"});
  }
};
var pages = PageSource.list();
var id = m.prop()
  , url = m.prop()
  , title = m.prop()
  , content = m.prop();

var App = {
//controller
  controller: function() {
    return {
      menu: pages
    , rotate: function() { pages().push(pages().shift()); }
    }
  },

//view
  view: function(ctrl) {
    return  [
      m("header"
        , m("h1", "Page title")
        , m("span",
            ctrl.menu().map(function(item) { 
              return [ btn(item.title, item.url) ];
              function btn(name, route){
                var isCurrent = (url === route);
                var click = function(){ 
                  //m.route(route); 
                  id = item.id;
                  url = item.url; 
                  content = item.content;
                  title = item.title;
                };
                return m(
                  "button"+(isCurrent ? ".active" : ""), 
                  {onclick: click}, 
                  name
                );
              }
            })
          )
        , m("hr")
       )
    ,  m("button", {onclick: ctrl.rotate}, "Rotate links" )
    ,  m(".page", content )
    ];
  }
};
//initialize
m.route.mode = "hash";
m.route(document.body, "/home", { 
  "/:url": App
})

【讨论】：