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

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)