Question

这是我对骨干+牵线木偶+需要+把手的第一次试验。我会就我所做的事情提供完整的解释，而且我不知道为什么它不起作用。我删除了所有可能的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_ main_menuView.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_ main_menu.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_ main_menuModel.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;
});

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

Answer 1

您的main_layout会被渲染，但从未显示过。这似乎是主要问题。

此外，console.log("router started")可能无法被调用，因为虽然您为“main_layout：rendered”事件定义了一个，但我看不到它在任何地方被触发。

此外，您可能会对布局VS区域感到困惑：区域与应用程序保持“静态”，而布局会在用户浏览应用程序时被删除并重新显示。例如，您可以使用区域来显示应用程序的标题菜单，但您可以使用布局来显示（例如）用户的主页（这样您就可以组织各种子视图）。换句话说，您创建应用程序区域以分割应用程序中始终显示的区域（例如标题，主要内容，页脚），然后您还可以使用布局（使用声明的区域）来组织需要子视图的视图（例如，具有“最后评论”区域，“联系信息”区域等的“用户简档”页面。它们具有相同的名称，但将应用程序区域视为应用程序中的“区域”，将布局区域视为“大型，复杂视图”的一部分。

最后但并非最不重要的，你可能想考虑使用像https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L43这样的布局（来自我的Marionette book）：注意我们使用lyout的“show”事件监听器来显示子视图。这意味着我们不需要手动调用render，这更符合Marionette的惯例。

屏幕上没有显示任何内容且没有错误，但填充了JavaScript对象

1 个答案: