0

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

这是我的应用程序的准系统代码。

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

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

4

1 回答 1

4

根据您显示的代码，我建议您阅读有关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();

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

如果你想监听添加到集合中，在collectionview中进行初始化，然后调用renderDoctor：

Hospital.bind('add', this.renderDoctor, this);
于 2012-11-21T20:58:33.033 回答