2 つの単純なビューがあり、1 つにはビューを作成してページに追加するボタンがあります。新しいビューは、リンク付きの 1 つのリスト項目と、各リスト項目にバインドする必要があるイベントで構成されます。ここでの問題はelオブジェクトだと思います.elオブジェクトを読んでいるものは、ビューの構築時に定義されていないときに自動的に作成されるべきですか? このフィドルを参照してください
HTML:
<div id="main">
<button type="button" class="add">Add view</button>
<ul id="tasks" />
</div>
<script id="view-template-new-task" type="text/html">
<li><a href="#" class="fire">Task</a></li>
</script>
JS:
var TaskView = Backbone.View.extend({
events: {
'click a.fire': 'fire'
},
fire: function() {
alert('fire');
},
initialize: function() {
this.template = _.template($('#view-template-new-task').html());
},
render: function() {
$('#tasks').append(this.template());
}
});
var View = Backbone.View.extend({
events: {
'click button.add': 'addView'
},
addView: function(e) {
var task = new TaskView();
task.render();
}
});
$(function() {
var view = new View({
el: $('#main')
});
});