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
});

如果我直接在app.html中添加<div id="page"></div>，它就有效。如何解决上述问题，而无需直接编写html？

Answer 1

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

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 )
} );

秘银：推迟路由配置，直到DOM准备就绪

1 个答案: