Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Backbone.js 低耦合:将模型添加到不同视图的集合中_Backbone.js_Marionette_Backbone Views_Backbone.js Collections - Fatal编程技术网

Backbone.js 低耦合:将模型添加到不同视图的集合中

Backbone.js 低耦合:将模型添加到不同视图的集合中,backbone.js,marionette,backbone-views,backbone.js-collections,Backbone.js,Marionette,Backbone Views,Backbone.js Collections,我正在构建一个主干/木偶应用程序来列出不同的卡集。布局左侧有一个ItemView,其中包括一个用于添加新集合的输入字段,右侧有一个CompositeView用于列出卡片集合 Cards.module("Set.SideBar", function(SideBar, App) { SideBar.SideBarView = Backbone.Marionette.ItemView.extend({ template: "#set-sideBar

我正在构建一个主干/木偶应用程序来列出不同的卡集。布局左侧有一个ItemView,其中包括一个用于添加新集合的输入字段,右侧有一个CompositeView用于列出卡片集合

Cards.module("Set.SideBar", function(SideBar, App) {
    SideBar.SideBarView = Backbone.Marionette.ItemView.extend({
        template: "#set-sideBar",
        className: "well sidebar-nav",
        ui: {
            saveBtn: "a.saveSet",
            setName: "input[type=text]"
        },
        events: {
            "click .saveSet": "saveSet"
        },
        saveSet: function(ev) {
            ev.preventDefault();

            var newSetName = this.ui.setName.val().trim();
            var newSet = new Cards.Entities.Set({ name: newSetName });

            newSet.save();

            // How to add the model to the collection?
        }
    });
});
我正在寻找将新闻集添加到下面的CompositeView集合中的最佳方法。有没有干净的低耦合解决方案来解决这个问题?我对backbone.js很陌生,无法想象这是一件完全不寻常的事情,但不知何故,我无法在有关文档中找到我的问题的答案,或者只是不理解它们

Cards.module('Set.List', function(List, App) {
    List.SetItemView = Backbone.Marionette.ItemView.extend({
        tagName: "tr",
        template: "#set-list-item"
    });

List.SetView = Backbone.Marionette.CompositeView.extend({
        tagName: "table",
        className: "table table-bordered table-striped table-hover",
        template: "#set-list",
        itemView: List.SetItemView,
        itemViewContainer: "tbody",
        modelEvents: {
            "change": "modelChanged"
        },

        initialize: function() {
            this.collection.fetch();
        }
    });
});
提前感谢您的帮助

我现在做得怎么样: 谢谢你的两个答案,它们指引了我正确的方向。collection.create提示也非常有用,解决了我面临的另一个问题

在牵线木偶控制器中,我执行类似操作,并简单地共享集合引用:

var setLayout = new Cards.Set.Layout();
Cards.mainRegion.show(setLayout);

var sets = new Cards.Entities.SetCollection();
var listView = new Cards.Set.List.SetView({ collection: sets });
setLayout.listRegion.show(listView);

var sideBarView = new Cards.Set.SideBar.SideBarView({ collection: sets });
setLayout.sideBarRegion.show(sideBarView);

新模型只需通过collection.create而不是.save()和.add()添加即可。

Backbone.collection.add可用于将模型添加到现有主干集合中。

另外,查看集合。创建-

如果您的模型被持久化,然后立即添加到集合中,您可以跳过
model.save()
然后
collection.add()
,只需使用
collection.create(model)


编辑:如前所述,使集合实例在侧栏视图中可见要保持视图解耦,可以从一个视图引发事件,而不是从其他视图引发事件可以随意侦听和处理。

为什么不与侧栏视图共享集合实例,并使用collection.add方法添加新模型?但是也可以发送一些带有事件的自定义数据吗?是的,作为触发器()的第二个参数传递的任何内容都将作为任何事件侦听器的第一个参数传递