0

私は（初心者として）リンクを追加するための小さなバックボーン関数を作成しています。これは、モデルに割り当てられるコレクションを使用するためです。

しかし、コレクションはエラーをスローします..誰も私のコードを修正できますか?

$(function(){
    var Model = new Backbone.Model({
        data:[
                {name:'Yahoo',href:'http://www.yahoo.com'},
                {name:'Gmail',href:'http://www.gmail.com'},
                {name:'Bing',href:'http://www.bing.com'}
              ]    
    });

    var Collection = new Backbone.Collection.extend({
        model:Model // is this not correct way to do?
    });

    var View = Backbone.View.extend({
        el:'#container',
        events:{
            'click button':'render'
            },
        initialize:function(){
            this.collection = new Collection(); //throw the error!
            this.template = $('#temp').children();
        },
        render:function(){
            var data = this.collection.get('data');
            for(i=0;i<data.length;i++){
                var li = this.template.clone().find('a')
                .attr('href',data[i].href)
                .text(data[i].name).end();
                this.$el.find('ul').append(li);
            }
        }
    });

    var myLink = new View();

})
4

1 に答える 1

2

モデルは、データの個々のチャンクを保存および管理するために使用されます。あなたの場合、それは単一の名前/href ペアになります。通常Backbone.Model.extend、モデル固有のすべてのメソッドとプロパティを使用してモデル「クラス」を作成し、そのモデルのインスタンスを作成するnewか、そのモデル「クラス」をコレクションのmodelプロパティとして設定して、コレクションがモデルの新しいインスタンスを作成できるようにします。 .

モデルは次のようになります。

var Model = Backbone.Model.extend({
    defaults: {
        name: '',
        href: ''
    }
});

newモデルインスタンスのベースとなる「クラス」を作成しているだけなので、そこには何もないことに注意してください。次に、モデルをコレクションに接続します (ここでもextendno を使用しnewます)。

var Collection = Backbone.Collection.extend({
    model: Model
});

コレクションのインスタンスを作成し、モデルのデータの配列を渡すことができます。

var links = new Collection([
    { name: 'Yahoo', href: 'http://www.yahoo.com' },
    { name: 'Gmail', href: 'http://www.gmail.com' },
    { name: 'Bing',  href: 'http://www.bing.com'  }
]);

ビューでコレクションをインスタンス化するのではなく、コレクションをビューに渡すことがよくあります。バックボーンは、次のように言うと自動的に設定されます。this.collectionnew SomeView({ collection: some_collection })

var View = Backbone.View.extend({
    //...
    initialize: function() {
        this.template = $('#temp').children();
    },

と言って、ビューの他の場所new View({ collection: links })からコレクションにアクセスしthis.collectionます。

コレクションはいくつかのモデル (配列のようなもの) のコレクションであり、さまざまな便利な Underscore メソッドが混在しているため、次のようにコレクションを反復処理できます。

render: function() {
    this.collection.each(function(link) {
        var li = this.template.clone().find('a').attr('href', link.get('href')).text(link.get('name'));
        this.$('ul').append(li);
    }, this);
}

また、モデル属性にアクセスするために を使用することにも注意しgetてください。モデル属性とオブジェクト プロパティは別のものです。toJSONを使用して、すべてのデータを一度に平坦化することもできます。コールバック内でビューを作成する最後のthis引数。バックボーンは既にビューのメソッドにエイリアスを提供しているので、それに切り替えます。eachthisthis.$el.find()this.$()

簡単なデモを次に示します: http://jsfiddle.net/ambiguous/WSqLM/

于 2012-12-16T17:58:34.960 に答える