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 initialize で行い、renderDoctor を呼び出します。

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