backbone.js 屏幕上不显示任何内容，也没有错误，但会填充JavaScript对象

这是我第一次试用backbone + marionette + require + handlebar。我会提供我所做的全部解释，我不知道为什么它不工作。我删除了所有可能的JavaScript错误，一切都被正确加载。所以，控制台没有错误，但页面保持完全空白。
它所表示的是一个带有按钮的简单标题菜单（标题中显示的无序按钮列表）。

Index.php

<head>
    <meta charset="UTF-8">
    <title>Zwoop</title>
    <link rel="stylesheet" type="text/css" href="http://www.zwoop.be/dev/css/layout.css">
</head>
<body>
    <script id='zwoop_interface' type='text/template'>
        <div id="headerRegion">
        </div>
        <div id="mainRegion"></div>
    </script>
    <script src="http://www.zwoop.be/dev/js/libs/require/require.js" data-main="js/main"></script>
</body>

main.js
注意：我没有收到任何JavaScript错误，JS文件被正确加载（我在浏览器中检查了这一点）。

//Require.js 
require.config({

    baseUrl: 'js', 

    paths   : {
        jQuery          : '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', 
        jQueryUI        : '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min', 
        lodash          : 'libs/lodash/lodash', 
        backbone        : 'libs/backbone/backbone', 
        marionette      : 'libs/marionette/marionette', 
        handlebars      : 'libs/handlebars/handlebars-v1.1.2', 
        text            : 'libs/require/text', 
        localstorage    : 'libs/backbone/localstorage' 
    },  

    shim    : {
        backbone: {
            deps        : ['jQuery', 'lodash'], 
            exports     : 'Backbone' 
        }, 
        marionette: {
            deps        : ['backbone'], 
            exports     : 'Marionette' 
        }, 
        handlebars: {
            exports: 'Handlebars'
        }
    }    
}); 

require(["backbone","marionette", "views/main_menuView"], function (Backbone, Marionette, Main_menuView) {

    var Zwoop = new Marionette.Application();
        //Pass options if required 
        var options = {
    };

    //Initialize functions 
    Zwoop.on("initialize:before", function(options){
        console.log("test");
    });

    Zwoop.addInitializer(function(options){

        var Main_Layout = Marionette.Layout.extend({
            template: "#zwoop_interface", 

            regions: {
                headerRegion: "#headerRegion",
                bodyRegion: "#bodyRegion"
            }
        });

        var main_layout = new Main_Layout();
        //Rendering the layout is required before you can show anything within the regions 
        main_layout.render();
        main_layout.headerRegion.show(Main_menuView);
        console.log("rendered"); //This console log works
    }); 

    Zwoop.vent.on("main_layout:rendered", function(){
        //Initialize router
        new ZwoopRouter();        
        Backbone.history.start();
        console.log("router started"); //This one is not called; I don't know why 
    });

    //Start the application 
    Zwoop.start(options);
    return Zwoop;

});

3_主菜单视图. js
注意：我在控制台上记录了“Main_MenuCollection.toJSON（）”，并且对象设置正确。

define([
    'jQuery', 
    'marionette', 
        'handlebars', 
        'text', 
    'text!templates/main_menu.html', 
        'models/main_menuModel'
], function ($, Marionette, Handlebars, Text, Main_menu_tpl, Main_MenuCollection) {
    'use strict';

    var Main_MenuView = Marionette.ItemView.extend({

            initialize: function () {
                    _.bindAll(this, 'render'); 
                    this.render();
        },

        el:  '#headerRegion',
                template: Handlebars.compile(Main_menu_tpl), 

        events: {
                    'click .main_menu_item':'select_menu'
        },

                select_menu: function(){
                    console.log("clicked");
                },

        render: function () {
                    this.$el.html(this.template({
                        models: Main_MenuCollection.toJSON()
                    }));
                    return this;
        }
    });

        var main_menuView = new Main_MenuView();
    return main_menuView;
});

4_主菜单. html
这是我使用的模板：

<ul id="main-menu">
    {{#each models}}
        <li><a id="{{models.id}}" href="{{models.href}}" class='main_menu_item'">{{models.label}}</a></li>
    {{/each}}
</ul>

4_主菜单模型. js模型+集合
注意：同样在这里，我在返回集合之前控制台记录了它，并且它被正确设置。

define([
    'backbone'
], function(Backbone){

    var Menu_ItemModel = Backbone.Model.extend({

        initialize: function(){

        }, 
        //These are data that are related to the main menu 
        defaults: {
            id: 'undefined', 
            href: 'undefined',
            label: 'undefined'
        }

    });

    var btn_bars = new Menu_ItemModel({id:'btn_bars', href: 'bars', label:'Bars'});
    var btn_eat = new Menu_ItemModel({id:'btn_eat', href: 'places_to_eat', label:'Places to eat'});
    var btn_events = new Menu_ItemModel({id:'btn_events', href: 'events', label:'Bars'});
    var btn_touristic = new Menu_ItemModel({id:'btn_touristic', href: 'touristic', label:'Touristic places'});
    var btn_hotels = new Menu_ItemModel({id:'btn_hotels', href: 'hotels', label:'Hotels'});
    var btn_shops = new Menu_ItemModel({id:'btn_shops', href: 'shops', label:'Shops'});
    var btn_companies = new Menu_ItemModel({id:'btn_companies', href: 'companies', label:'Companies'});

    var Main_MenuCollection = Backbone.Collection.extend({
        initialize: function(){

        }, 
        model: Menu_ItemModel
    });

    var main_menuCollection = new Main_MenuCollection();    

    main_menuCollection.add([
            btn_bars, 
            btn_eat, 
            btn_events, 
            btn_touristic, 
            btn_hotels, 
            btn_shops, 
            btn_companies
        ]);

    return main_menuCollection;
});

第一次尝试，我还不太有经验，所以我真的不知道该从哪里找到问题。你有什么建议吗？

你的main_layout得到了渲染，但从来没有显示过。这似乎是主要问题。
此外，console.log("router started")可能不会被调用，因为尽管您为“main_layout：rendered”事件定义了一个侦听器，但我没有看到它在任何地方被触发。
此外，您可能对布局与区域感到困惑：区域在应用程序中保持“静态”，而布局会在用户导航应用程序时移除并重新显示。例如，您可以使用区域显示应用程序的标题菜单，但您可以使用布局显示（例如）用户的主页（以便您可以组织各种子视图）。换句话说，您可以创建应用程序区域来分割应用程序中始终显示的区域（如页眉、主要内容、页脚），然后你也可以使用布局（使用声明的区域）来组织需要子视图的视图（例如，具有“最后评论”区域、“联系信息”区域等的“用户简档”页面）。它们具有相同的名称，但是将应用程序区域视为应用程序中的“区域”，并且将布局区域视为“大的、复杂的视图的部分”。
最后但并非最不重要的一点是，您可能需要考虑使用如下布局：https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L43（来自我的Marionette book）：注意，我们使用lyout的“show”事件监听器来显示子视图，这意味着我们不需要手动调用render，这更符合Marionette的约定。

backbone.js 屏幕上不显示任何内容，也没有错误，但会填充JavaScript对象

1条答案

相关问题

热门标签

最新问答