Question

我在链接我的模型时遇到了一些问题 - 这些模型将自己的视图添加到集合中。我不知道我是否以正确的方式这样做。我不知道我是否也需要收集视图。

以下是我的应用的准系统代码。

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

我无法在任何地方找到这个基本的例子。提前谢谢。

Answer 1

根据您显示的代码，我建议您查看backbone.js上的教程（Google是一个很好的起点）。其中有很多，它将帮助您理解视图，模型和集合之间的关系。

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

//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();

正如您所看到的，该集合与医生相关联，集合视图为每位医生创建了一个医生视图并将其自行附加。

如果你想收听对集合的添加，请在集合视图初始化中执行，并调用renderDoctor：

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

使用骨干j将模型连接到集合的最佳方法

1 个答案: