Collections 使用主干js将模型连接到集合的最佳方法

我在链接我的模型时遇到了一些问题，这些模型在集合中有自己的视图。我不知道我这样做是否正确。我不知道我是否也需要一个收藏视图

以下是我的应用程序的基本代码

var Model = Backbone.Model.extend ({
initialize : function () {
    new ModelView({model:this});
}
});

var ModelCollection = Backbone.Collection.extend({
initialize : function () {
    console.log('collected');
    this.on("add",function(){
        console.log('added model');
    });
},
model: Model
}); 

var Models = new ModelCollection;

var ModelView = Backbone.View.extend({
initialize : function () {
    console.log('view is loaded');
    this.render();
    this.model.on('change', this.render, this);
},
el: $('#menu'),
render : function () {
    var data = this.model.toJSON();
    var template = Handlebars.compile($("#menu-template").html());
    $(this.el).html(template(data));
    return this; 
},
});

var ModelCollectionView = Backbone.View.extend({
initialize : function () {
    console.log('Collection view created');
    Models.bind('add', this.addOne, this);
    Models.bind('reset', this.addAll, this);
    Models.bind('all', this.render, this);
},

addOne : function (model) {
    console.log('working');
    var view = new ModelView({model: model});
}
});

var ModelCollection = new ModelCollectionView;

我不知道我是否遗漏了什么，或者我是否需要这段代码

var model = new Model();
Models.push(model);

---

我只是找不到一个基本的例子。提前感谢。

根据您展示的代码，我建议您阅读一篇关于

backbone.js的教程（谷歌是一个很好的起点）。它们有很多，这将帮助您理解视图、模型和集合之间的关系

尽管如此，有一个只创建模型新视图的模型似乎很奇怪。
模型的全部要点是它应该包含数据，而数据又会显示在视图中。
看看这个例子是如何分发的：

//Some doctors in an array, just mockupdata to create models from
var someDoctors = [
    { name: "SomeName1" type: "Surgeon" },
    { name: "SomeName2" type: "Surgeon" },
    { name: "SomeName3" type: "Surgeon" },
    { name: "SomeName4" type: "Surgeon" }
];

//define product model
var Doctor = Backbone.Model.extend({
    defaults: {
        favoriteTool: "Stethoscope"
    }
});

//define a hospital collection of doctors
var Hospital = Backbone.Collection.extend({
    model: Doctor
});

//define individual doctor view which renders a template based on data from the model
var doctorView = Backbone.View.extend({
    tagName: "li",
    className: "doctor-container",
    template: $("#doctorTemplate").html(),

    render: function () {
        var tmpl = _.template(this.template);
        $(this.el).html(tmpl(this.model.toJSON()));
        return this;
    }
});

//define the hospital view
var hosptialView = Backbone.View.extend({
    el: $("#doctors"),

    initialize: function () {
        this.collection = new Hosptial(someDoctors);
        this.render();
    },

    // go through all models in the hospital and calls renderDoctor for each model
    render: function () {
        var that = this;
        _.each(this.collection.models, function (item) {
            that.renderDoctor(item);
        }, this);
    },

    //create a view for the item (doctormodel) and appends it to this views el.
    renderDoctor: function (item) {
        var doctorView = new DoctorView({
            model: item
        });
        this.$el.append(doctorView.render().el);
    }
});

//create instance of hospital view
var hosptial = new hosptialView();

如您所见，集合连接到医生，集合视图为每个医生创建一个doctorview，并将其自身附加到它

如果要侦听对集合的添加，请在collectionview初始化中执行，然后调用renderDoctor:

Hospital.bind('add', this.renderDoctor, this);

根据您展示的代码，我建议您阅读关于
backbone.js
的教程（谷歌是一个很好的起点）。它们有很多，这将帮助您理解视图、模型和集合之间的关系

尽管如此，有一个只创建模型新视图的模型似乎很奇怪。
模型的全部要点是它应该包含数据，而数据又会显示在视图中。
看看这个例子是如何分发的：

//Some doctors in an array, just mockupdata to create models from
var someDoctors = [
    { name: "SomeName1" type: "Surgeon" },
    { name: "SomeName2" type: "Surgeon" },
    { name: "SomeName3" type: "Surgeon" },
    { name: "SomeName4" type: "Surgeon" }
];

//define product model
var Doctor = Backbone.Model.extend({
    defaults: {
        favoriteTool: "Stethoscope"
    }
});

//define a hospital collection of doctors
var Hospital = Backbone.Collection.extend({
    model: Doctor
});

//define individual doctor view which renders a template based on data from the model
var doctorView = Backbone.View.extend({
    tagName: "li",
    className: "doctor-container",
    template: $("#doctorTemplate").html(),

    render: function () {
        var tmpl = _.template(this.template);
        $(this.el).html(tmpl(this.model.toJSON()));
        return this;
    }
});

//define the hospital view
var hosptialView = Backbone.View.extend({
    el: $("#doctors"),

    initialize: function () {
        this.collection = new Hosptial(someDoctors);
        this.render();
    },

    // go through all models in the hospital and calls renderDoctor for each model
    render: function () {
        var that = this;
        _.each(this.collection.models, function (item) {
            that.renderDoctor(item);
        }, this);
    },

    //create a view for the item (doctormodel) and appends it to this views el.
    renderDoctor: function (item) {
        var doctorView = new DoctorView({
            model: item
        });
        this.$el.append(doctorView.render().el);
    }
});

//create instance of hospital view
var hosptial = new hosptialView();

如您所见，集合连接到医生，集合视图为每个医生创建一个doctorview，并将其自身附加到它

如果要侦听对集合的添加，请在collectionview初始化中执行，然后调用renderDoctor:

Hospital.bind('add', this.renderDoctor, this);

谢谢这真的很有帮助。这些评论帮助我理解了我思想和理解中缺失的部分。我将尝试以这种方式实施它，并让你知道我的进展如何。谢谢你只是想检查一下你的例子是否有不一致之处？似乎有“医生”、“医生”和“医生”。这些都是相同的吗@jedimortenOk…所以一切似乎都在工作-除了我得到一个额外的模型，它是空的，没有属性。我知道它存在的唯一原因是因为我可以在控制台@jedis中看到它。我解决了我的问题——我传递的是数据，而不是我的模型。非常感谢你的帮助谢谢。这真的很有帮助。这些评论帮助我理解了我思想和理解中缺失的部分。我将尝试以这种方式实施它，并让你知道我的进展如何。谢谢你只是想检查一下你的例子是否有不一致之处？似乎有“医生”、“医生”和“医生”。这些都是相同的吗@jedimortenOk…所以一切似乎都在工作-除了我得到一个额外的模型，它是空的，没有属性。我知道它存在的唯一原因是因为我可以在控制台@jedis中看到它。我解决了我的问题——我传递的是数据，而不是我的模型。非常感谢你的帮助