Javascript 如何组织具有主干的多应用程序？

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

因此，我创建了一个网站来管理一些产品。我对此有两个动态页面：

• 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);
    }

});

视图的初始化如下所示：

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

因为这个元素在两个页面（add.php和edit.php）上，所以对这两个页面都很好

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

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

我向

请求

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

---

怎么办？要创建一个单独的视图文件，其中包含对页面需求的更改吗？但是它违反了DRY的原则，并且产生了大量的客户端代码

创建视图时，可以将选项传递给视图

在编辑页面上：

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);
    }
}

---

创建视图时，可以将选项传递给视图

在编辑页面上：

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);
    }
}

---

我觉得视图不应该有任何特定于集合的逻辑。它应该做的唯一一件事是根据激发的事件渲染视图

因此，在这种情况下，我要做的是绑定子视图上的公共事件

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

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

这对两个页面都是通用的

在视图在其父视图中实际实例化之前

添加视图

initialize : function() {
    this.collection = new App.Collections.Categories
    this.collection.on('request', this.action);
},
new App.Views.CategoriesViews({
   el: $('#select-box-cats'),
   collection: this.collection
});

---

我觉得视图不应该有任何特定于集合的逻辑。它应该做的唯一一件事是根据激发的事件渲染视图

因此，在这种情况下，我要做的是绑定子视图上的公共事件

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

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

这对两个页面都是通用的

在视图在其父视图中实际实例化之前

添加视图

initialize : function() {
    this.collection = new App.Collections.Categories
    this.collection.on('request', this.action);
},
new App.Views.CategoriesViews({
   el: $('#select-box-cats'),
   collection: this.collection
});

---

好吧这是一个简单的例子。看到那个方法了吗？如果在编辑页面上，此方法应引发额外的触发器，该怎么办？但是不应该在添加页面上这样做。同样，我会将该信息传递给视图。将您的选项称为“additionalTriggerForEdit”。在创建主干视图时，可以向主干视图添加任何选项。检查初始化中的选项，并在需要时绑定触发器。我添加了一个“toggleCategories”选项，并演示了如何从切换方法访问该选项。谢谢，我感谢您的回答！好吧这是一个简单的例子。看到那个方法了吗？如果在编辑页面上，此方法应引发额外的触发器，该怎么办？但是不应该在添加页面上这样做。同样，我会将该信息传递给视图。将您的选项称为“additionalTriggerForEdit”。在创建主干视图时，可以向主干视图添加任何选项。检查初始化中的选项，并在需要时绑定触发器。我添加了一个“toggleCategories”选项，并演示了如何从切换方法访问该选项。谢谢，我感谢您的回答！