2

我正在构建一个 Backbone/Marionette 应用程序来列出不同的卡片集。布局左侧有一个 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?
        }
    });
});

我正在寻找将newSet添加到下面的 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 提示也非常有用，解决了我面临的另一个问题！

在 Marionette.Controller 我做这样的事情并简单地分享集合参考：

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() 添加的。

4

2 回答 2

2

Backbone.Collection.add 可用于将模型添加到现有的主干集合。 http://backbonejs.org/#Collection-add

另外，查看 Collection.Create - http://backbonejs.org/#Collection-create

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

编辑：如前所述，使集合实例从侧边栏视图可见

于 2013-05-20T04:32:43.780 回答
1

为了保持视图解耦，您可以从一个视图引发事件，其他视图可以随意收听和处理。

于 2013-05-20T15:15:25.790 回答