編集1：this.model.destroy（）、this.collection.remove（this.model）など、要素を削除するためのさまざまな戦略を試しました。また、events：構文と直接バインドを使用してイベントをバインドしました。初期化とレンダリングの両方の戦略。
削除する代わりにthis.collection.addを使用するようにコードを変更すると、追加のXノートが追加されます。ここで、Xは現在コレクションにあるノートの数です。
私は基本的なリストアプリを作成しています（最終的には具体化される予定です）。リスト内の各要素に、リストから削除するボタンを設定したいと思います。
使ってます
- require.js
- 背骨
- ローダッシュ
- jquery
以下のコードスニペットは、Notesビュー、Noteビュー、およびそれぞれのレンダリングに使用されているテンプレートを含めるためのサポートのビューコードを示しています。
現時点では、任意のメモの[非表示]ボタンをクリックすると、コレクション内のすべての要素が一度に1つずつ削除されるため、コードは期待どおりに機能していません。「deletenote」メソッドの最後にアラートを挿入できるため、これが起こっていることを知っています。これにより、削除を区分的に表示できます。
また、イベントコールバックをオフにして親のNotesViewを再レンダリングしても、すべてのNoteビューが削除されるため、親のrenderメソッドが問題の原因ではないこともわかっています。
<script type="text/template" id="noteslist-template">
<ul id="noteslist" style="list-style: none;">
</ul>
</script>
<script type="text/template" id="note-template">
<li>
<button type="button" class="notesbutton" id="hidenote">hide</button>
<div id="note"><%= text %></div>
</li>
</script>
NotesView.js
define
([ 'jquery',
'underscore',
'backbone',
'notes/sample/sampletext', //included to populate a collection for rendering *REMOVE ONCE DONE TESTING*
'notes/collections/Notes', //included to create a new instance of the Notes collection during the initialize method of this view
'notes/models/Note', //included to reference the model when creating NoteView instances for rendering
'notes/views/NoteView' ], //included to call render functions on each Note model in the collection
function($,_,Backbone,SampleText,Notes,Note,NoteView)
{
var NotesView = Backbone.View.extend
({
initialize: function()
{
this.template = _.template($('#noteslist-template').html());
_.bindAll(this,'render','rendernote');
this.collection.bind('add',this.render);
this.collection.bind('remove',this.render);
},
render: function()
{
console.log('collection render');
this.$el.html(this.template({})); //change to this.notelist = THISLINE
this.collection.each(this.rendernote);
//add call to render notelist to DOM
return this;
},
rendernote: function(note) //add notelist variable
{
console.log('collection rendernote');
var noteview = new NoteView(
{ model:note,
collection:this.collection} );
//add notelist += LINEBELOW
noteview.setElement(this.$('#noteslist'));
noteview.render();
//change noteview.render to NOT write to DOM
}
});
return NotesView;
}
);
NoteView.js
define
( [ 'jquery',
'underscore',
'backbone',
'notes/models/Note', ], //include the Note model to reference as the model for the collection
function($,_,Backbone,Note)
{
var NoteView = Backbone.View.extend
({
tagName: "li",
className: "note",
events:
{
'click #hidenote':'deletenote',
},
initialize: function()
{
_.bindAll(this,'render','remove','deletenote');
//this.model.bind('change',this.render);
this.template = _.template($('#note-template').html());
this.model.bind('remove', this.remove);
},
render: function()
{
this.notetorender = this.template(this.model.toJSON());
this.$el.append(this.notetorender);
return this;
},
deletenote: function()
{
this.options.collection.remove(this.model);
}
});
return NoteView;
}
);