Backbone.jsに初期データを読み込む

私はbackbone.jsとMVCに慣れていないので、これが愚かな質問であれば謝罪します...

backbone.jsのチュートリアルを試していて、最初のデータセットをページに読み込む方法を試しています。

もし誰かが正しい方向に私を指すことができますか、私が下に欠けているものを私に示すことができれば、それは非常に高く評価されるでしょう!

ありがとう!

The code is below or at: http://jsfiddle.net/kiwi/kgVgY/1/

HTML:

Add list item

JS:

 (function($) {
   Backbone.sync = function(method, model, success, error) {
     success();
 }

var Item = Backbone.Model.extend({
    defaults: {
        createdOn: 'Date',
        createdBy: 'Name'
    }
});


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


//    ------------
//    ItemView
//    ------------
var ItemView = Backbone.View.extend({
    tagName: 'li',
   //name of tag to be created        
    events: {
        'click span.delete': 'remove'
    },

   //`initialize()` now binds model change/removal to the corresponding handlers below.
    initialize: function() {
        _.bindAll(this, 'render', 'unrender', 'remove');//every function that uses 'this' as the current object should be in here
        this.model.bind('change', this.render);
        this.model.bind('remove', this.unrender);
    },

   //`render()` now includes two extra `span`s corresponding to the actions swap and delete.
    render: function() {

        $(this.el).html('' + this.model.get('planStartDate') + ' ' + this.model.get('planActivity') + '     [delete]');
        return this;//for chainable calls, like .render().el
    },

   //`unrender()`: Makes Model remove itself from the DOM.
    unrender: function() {
        $(this.el).remove();
    },

   //`remove()`: We use the method `destroy()` to remove a model from its collection.
    remove: function() {
        this.model.destroy();
    }
});


//    ------------
//    ListView
//    ------------
var ListView = Backbone.View.extend({
    el: $('body'),
   //el attaches to existing element
    events: {
        'click button#add': 'addItem'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'addItem', 'appendItem');//every function that uses 'this' as the current object should be in here
        this.collection = new List();
        this.collection.bind('add', this.appendItem);//collection event binder
        this.render();
    },

    render: function() {
        _(this.collection.models).each(function(item) {//in case collection is not empty
            appendItem(item);
        }, this);
    },

    addItem: function() {
        var item = new Item();

        var planStartDate = $('#planStartDate').val();
        var planActivity = $('#planActivity').val();

        item.set({
            planStartDate: planStartDate,
            planActivity: planActivity
        });

        this.collection.add(item);
    },

    appendItem: function(item) {
        var itemView = new ItemView({
            model: item
        });
        $('ul', this.el).append(itemView.render().el);
    }
});

var listView = new ListView();
 })(jQuery);

ありがとう。

3

1 答え

Here's the modified example: http://jsfiddle.net/kgVgY/2/

最初にコレクションを作成したいデータ

 var list = new List([{
        createdOn: 'Jan',
        createdBy: 'John',
    planStartDate: "dfd",
    planActivity: "dfdfd"
    }]);

必要なビューにコレクションを渡します

var listView = new ListView({collection: list});

これはあなたがこのコードで間違っていたことのすべてについてです。マイナーな無関係なメモはほとんどありません。

  • あなたは_(this.collection.models)を使用していました。 バックボーンコレクションはアンダースコアを使用してそれらの機能をすべて公開するので同等ですto this.collection.each

  • ItemViewの "アンレンダー"メソッドは本当に必要ありませんが、使用していないのでデバッグに使用していると思います。

2
追加された
あなたの素早い返信とthis.collection.eachに関する追加情報をありがとう。再度、感謝します!
追加された 著者 Matt,
また、 Backbone.collection.reset メソッドをチェックアウトする価値があります。良いこと、時には、 add または remove code> events - 完了したら reset するだけです
追加された 著者 Tom Tu,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript