将集合绑定到 Backbone 中的模型答案

【问题标题】：Bind a collection to a model in Backbone将集合绑定到 Backbone 中的模型
【发布时间】：2012-07-19 11:01:03
【问题描述】：

我有一个服务器端类：TopicsListModel 属性如下：

public class TopicsListModel
{
    public TopicsListModel()
    {
        ChildTopics = new HashSet<TopicsListModel>();
    }

    public int Id { get; set; }
    public string Name { get; set; }
    public ICollection<TopicsListModel> ChildTopics { get; set; }
}

有一个函数返回一个列表，

public JsonResult SearchTopic(String topic)
    {
        var topics = LandingManager.SearchTopics(topic);
        //return Json(topics);
        return new JsonResult { Data = topic, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

我需要将它添加到 Backbone 模型和集合中。我是 Backbone 的新手，你可以猜到我正在挣扎。任何帮助将不胜感激。

我想建立一个模型来存储如下数据：

{    name: "Model1",    id: 1,    submodels: [{ name: "Submodel1", id: 2 }, { name: "Submodel1", id: 2 }] }

我无法这样做，我无法设置这样的基本集合，即返回我共享的数据的 ASP.NET MVC 代码部分。分享我在 Backbone 所做的一切：

TestBB = function () {
if (!window.console) window.console = { log: function () { } };

var treeModel = Backbone.Model.extend({});
var treeSubModel = Backbone.Model.extend({});
var treeCollection = Backbone.Collection.extend({
    model: treeSubModel,
    initialize: function () {
        console.log('Collection Initialized');
    }
});
var treeView = Backbone.View.extend({
    el: $('#tree-view'),
    initialize: function () {
        //            this.collection.bind("render", this.render, this);
        //            this.collection.bind("addAll", this.addAll, this);
        //            this.collection.bind("addOne", this.addOne, this);
        _.bindAll(this);
    },
    render: function () {
        console.log("render");
        console.log(this.collection.length);
        $(this.el).html(this.template());
        this.addAll();
        var template = _.template($("#template").html(), {});
        this.el.html(template);
    },
    addAll: function () {
        console.log("addAll");
        this.collection.each(this.addOne);
    },
    addOne: function (model) {
        console.log("addOne");
        view = new treeView({ model: model });
        $("ul", this.el).append(view.render());
    },
    events: { "click #btnFind": "doFind" },
    doFind: function (event) { alert('event fired'); }
});

return {
    TreeView: treeView
};} (Backbone);

请提出建议。

【问题讨论】：

我想你可以试着让你的问题更具体一点。您不清楚您是否在集合获取或子集合的基础知识方面遇到问题，或者特别是从 ASP.NET 获取方面遇到问题。您还可以向我们展示您到目前为止所做的尝试，看看我们是否可以调试一些实际代码。
@stusmith: 对绑定部分感到抱歉，我弄错了 :)

标签： javascript asp.net-mvc-3 backbone.js client-side backbone-events

【解决方案1】：

这不是将集合“绑定”到后端的情况，例如：您 fetch 来自服务器的集合以读取，save（通过同步）写入。

首先，您需要通过设置url 属性让集合知道数据所在的位置。请参阅：http://backbonejs.org/#Collection-url。

其次，您需要使用fetch 方法实际检索数据。见http://backbonejs.org/#Collection-fetch。请注意，这是异步的，因此您需要等待 success 回调。

要保存数据，请在单个模型上使用save 方法。见http://backbonejs.org/#Model-save。

【讨论】：

不是很有启发性（考虑到上述案例和新手非常笼统！），也许您可以详细说明所提到的上下文，即设置模型和集合。

【解决方案2】：

已解决我想出了方法并定义了模型并填充了它！

【讨论】：