は、私はそこからBACKBONE.JSチュートリアルのいくつかを実験してきた...</p> <p>を私はこれは愚かな質問であるならばそう謝罪BACKBONE.JSへの新しいMVCよBACKBONE.JS

Question

で初期データをロードし、最初のデータセットをページに読み込む方法を試しています。

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

ありがとうございます！

コードを下回るかである：http://jsfiddle.net/kiwi/kgVgY/1/

HTML：

：

リスト項目

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('<span">' + this.model.get('planStartDate') + ' ' + this.model.get('planActivity') + '</span> &nbsp; &nbsp; <span class="delete">[delete]</span>'); 
     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); 

ありがとうございました。

Answer 1

ここで変形例です：あなたは

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

をしたいデータとの最初のコレクションを作成し、次いで約だあなたは

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

をしたいビューにコレクションを渡すhttp://jsfiddle.net/kgVgY/2/

あなたはこのコードで間違っていました。関連性の低いマイナーなメモはほとんどありません。

• あなたは_（this.collection.models）.eachを使用していました。 Backbone collections use underscoreそれ自体にすべての関数を公開するので、this.collection.eachと等価です

• ItemViewでは「アンレンダー」メソッドは必要ありませんが、私はそれを推測していますデバッグに使用しています。