javascript - Mithril：推迟路由配置，直到 DOM 准备好

Question

我的应用在其视图中有 div，它将用作我的应用页面的挂载点。

app.view = function(ctrl) {
    return [
        appHeader.view(),
        appNav.view(),
        m("#page")
    ];
};

以下似乎不起作用：

m.mount(document.getElementById("app"), app);

m.route.mode = "hash";
m.route(document.getElementById("page"), "", {
    "select_company": admin.SelectCompany
});

如果我<div id="page"></div>直接包含在 app.html 中，它会起作用。不直接写html怎么解决上面的问题？

Answer 1

@ArthurClemens 和 @barneycarroll 通过 Gitter 聊天告诉我，不推荐在一个应用程序中同时使用 m.mount() 和 m.route() 方法。@barneycarroll 提供的一种解决方案是仅使用 m.route()，并使用将返回页面视图以及应用程序的其他常见部分的函数，如下所示（jsbin 在这里）：

var header = {
  view : function(){
    return m( "h1", "This is the persistent site header" )
  }
}

var nav = {
  controller : function(){
    this.links = [
      [ "/", "Home" ],
      [ "/select_company", "Companies" ]
    ]
  },
  view : function( ctrl ){
    return m( "ul", 
      ctrl.links.map( function( link ){
    return m( "li", 
      m( "a", {
        config : m.route,
        href   : link[ 0 ]
      }, link[ 1 ] )
    )
      } )
    )
  }
}

function furnish( component ){
  return {
    view : function(){
      return [
    header,
    nav,
    component
      ]
    }
  }
}

var home = {
  view : function(){
    return m( "h2", "Welcome!" )
  }
}

var selectCompany = {
  view : function(){
    return m( "h2", "Please select a company" )
  }
}

m.route.mode = "hash";
m.route( document.body, "/", {
    "/"              : furnish( home ),
    "/select_company": furnish( selectCompany )
} );