javascript - 如何组织一个有 Backbone 的多应用程序？

Question

我使用干净的主干，没有包装器或框架。

所以我创建了一个网站来管理一些产品。我有两个动态页面:

• add.php
• edit.php

这些页面是单独的主干应用程序。

在这两个页面中，都有一个元素显示产品类别。通常它是一个下拉列表。

接下来，我将描述我的脚本的大致结构。很简单。

js
+- models
|  +- Category.js
|  ...
+- collections
|  +- Categories.js
|  ...
+- views
|  +- CategoriesView.js
|  ...

CategoryView.js 包含:

App.Views.CategoriesViews = Backbone.View.extend({
    template: _.template($('#tpl-categories').html()),

    events: {
        'change select': 'toggle'
    },

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

        this.collection.on('reset', this.render);
    },

    render: function () {
        this.$el
            .html(this.template({ collection: this.collection.toJSON() }));

        return this;
    },

    toggle: function () {
        // Some actions here
        var catId = this.$el.children('select').val();
        App.trigger('toggleCategories', catId);
    }

});

View 的初始化如下所示:

new App.Views.CategoriesViews({
   el: $('#select-box-cats'),
   collection: new App.Collections.Categories
});

由于此元素位于两个页面(add.php 和 edit.php)上，因此它对这两个页面都适用。

我们假设模板的名称可以在两个页面上设置相同:

<script type="text/template" id="tpl-categories">

尽管我认为这不是一个好的做法。

好吧，最后是我的问题。

如果这些页面之一需要向 View 添加事件处理程序，会发生什么情况。例如:

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

   this.collection.on('reset', this.render);
   this.collection.on('request', this.action);
},

我向request集合添加了一个事件。但是，此事件不应出现在其他页面上。

该怎么办？要创建一个单独的 View 文件来根据页面的需要进行更改吗？但它违反了 DRY 原则并产生了大量客户端代码!

Answer 1

您可以在创建 View 时将选项传递给 View 。

在您的编辑页面上:

new App.Views.CategoriesViews({
    el: $('#select-box-cats'),
    collection: new App.Collections.Categories,
    bindRequest: true, // Trigger the request event.
    toggleCategories: true // Toggle the categories in the toggle method.
});

在您的添加页面上:

new App.Views.CategoriesViews({
    el: $('#select-box-cats'),
    collection: new App.Collections.Categories,
    bindRequest: false, // Do not trigger the request event.
    toggleCategories: false // Do not toggle categories in the toggle method.
});

在您看来:

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

    this.collection.on('reset', this.render);

    // this.options is automatically populated with any parameters included 
    // upon creation.
    if (this.options.bindRequest) {
        this.collection.on('request', this.action);
    }
},

toggle: function () {
    // Some actions here
    var catId = this.$el.children('select').val();

    // Options are available from any method in the view.
    if (this.options.toggleCategories) {
        App.trigger('toggleCategories', catId);
    }
}