Question

我对BackboneJS很陌生，所以请原谅我（也许）愚蠢的问题。我已经按照https://github.com/ccoenraets/backbone-cellar上看到的例子，到目前为止一直很好......

我的index.html看起来像这样：

<head>
   <script src="http://code.jquery.com/jquery-2.1.0-beta1.js"></script>
   <script data-main="js/config" src="js/libs/require.min.js"></script> 
</head>
<body>
<nav class="nav">
<?php include 'navmenu.php'; ?>
</nav>

<div id="container" class="cw">
</div>
</body>

现在我创建了一个header_menu.js：

define(['jquery', 'lodash', 'backbone', 'utils/tpl'],

function($, _, Backbone, tpl) {

    var HeaderMenuView = Backbone.View.extend({

    initialize: function() {
        this.template = _.template(tpl.get('topcontent'));
    },

    render: function(eventName) {
        this.$el.html(this.template());
        return this.el;
    },

});

return HeaderMenuView;

});

topcontent-template是一个简单的html文件...

现在，wine-cellar示例包含以下main.js文件：

function($, _, Backbone, HeaderView, StartView, WineView, WineListView, tpl, Wine, WineCollection) {

Backbone.View.prototype.close = function() {
    console.log('Closing view ' + this);
    if (this.beforeClose) {
        this.beforeClose();
    }
    this.remove();
    this.unbind();
};

var AppRouter = Backbone.Router.extend({

    initialize: function() {
        $('#header').html(new HeaderView().render());
    },

    routes: {
        "": "list",
        "wines/new": "newWine",
        "wines/:id": "wineDetails"
    },

    list: function() {
        this.before(function() {
            this.showView('#content', new StartView());
        });
    },

    wineDetails: function(id) {
        this.before(function() {
            var wine = this.wineList.get(id);
            this.showView('#content', new WineView({
                model: wine
            }));
        });
    },

    newWine: function() {
        this.before(function() {
            this.showView('#content', new WineView({
                model: new Wine()
            }));
        });
    },

    showView: function(selector, view) {
        if (this.currentView) this.currentView.close();

        $(selector).html(view.render());
        this.currentView = view;

        return view;
    },

    before: function(callback) {
        if (this.wineList) {
            if (callback) callback.call(this);
        } else {
            this.wineList = new WineCollection();
            var self = this;
            this.wineList.fetch({
                success: function() {
                    var winelist = new WineListView({
                        model: self.wineList
                    }).render();
                    $('#sidebar').html(winelist);
                    if (callback) callback.call(self);
                }
            });
        }
    }

});

tpl.loadTemplates(['header', 'wine-details', 'wine-list-item', 'start'], function() {
    window.app = new AppRouter();
    Backbone.history.start();
});

});

我现在的问题是，如何将我的header_menu.js模板/视图转换为我的Div，id =“container”？我不使用winecellar示例中的所有路由器的东西，所以我想我只需要做一个简单的初始化事物？

请帮帮我

BackboneJS - 如何显示外部模板

0 个答案: