Question

我正在尝试使用Backbone和Require JS使用木偶来实现它的一些出色功能。但是，我发现有一些问题可以在模板中呈现视图：

这是我的Js文件：

define(
    ['jquery',
     'bootstrap',
     'backbone',
     'marionette',
     'jquery-ui',
     'text!templates/admin/home.html',
     'js/views/admin/sidebar',
     'js/views/admin/mainContent'
    ], 
    function(
        $,
        Bootstrap,
        Backbone, 
        Marionette,
        JqueryUI,
        ViewMainLayout,
        ViewSidebarMenu,
        ViewMainContent
    ) {
        var TestApp = new Backbone.Marionette.Application();

        TestApp.addInitializer(function(){
            var layoutView = new AppLayoutView();
            layoutView.render();
            TestApp.appRegion.show(layoutView);

            layoutView.menu.show(ViewSidebarMenu);
            layoutView.content.show(ViewMainContent);
        });


         var AppLayoutView = Backbone.Marionette.Layout.extend({
             template: "#layoutPage",

             regions: {
                 menu: "#sideMenuBar",
                 content: "#MainContent"
              }
          });



        TestApp.addRegions({
            appRegion: "#homepage"
         });

        TestApp.start();
});

这是我的html文件：

<div id="homepage"></div>

<script type="text/template" id="layoutPage">       

<div id="sideMenuBar"> --- Loading Sidebar Menu --- </div>

<div id="MainContent"> --- Loading Content --- </div>

<div class="clearfix">&nbsp;</div>
</script>

浏览器控制台会抛出错误：错误：找不到模板：backbone.js文件中的'#homepage'。

知道造成这种情况的原因是什么？

Answer 1

很明显是什么导致了您的问题 - 主干在您的HTML中找不到#homepage。我假设当你说“这是我的html文件”时，你指的是你的模板（text!templates/admin/home.html），而不是浏览器加载的页面上的html？如果是这种情况，那么重要的是要注意你在视图中没有任何地方从模板中加载任何东西到DOM中，这可能就是Marionette找不到它的原因。

有几种方法可以与requireJS结合使用，但我通常只是使用jQuery将模板直接加载到DOM中：

$("body").after(ViewMainLayout)

布局和区域使用require js，Backbone，Marionette和Underscore js

1 个答案: