私はbackbone.jsを使用してWebアプリケーションの作成を開始しましたが、少し問題が発生しました。新しいアイテムを作成することができ、まったく問題ありません。ただし、render()メソッドで作成されたボタンにイベントをバインドしていません。基本的に、新しいアイテムを追加するたびに、[編集と削除]ボタンが表示されます。モデルをそれらにバインドして、その特定のアイテムを遡及的に編集または削除できるようにします。
私のバックボーンビュー:
ClientView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.clients = new Clients(null, { view: this });
},
events: {
"click #add-client": "AddClient",
"click .edit-client": "EditClient",
"click #save-client": "SaveNewClient"
},
render: function (model) {
var compiled_template = _.template($("#Client-Template").html());
$("#client-rows").append(compiled_template(model.toJSON()));
$("input:button", $("#client-rows")).button();
$("#addClientModal").modal("hide");
return this;
},
AddClient: function (model) {
$("#addClientModal h3").text("Add Client");
$("#addClientModal").modal("show");
},
EditClient: function (model) {
$("#addClientModal h3").text("Edit Client");
$("#addClientModal").modal("show");
},
SaveNewClient: function () {
var client_firstName = $("#clientFirstName").val();
var client_lastName = $("#clientLastName").val();
var client_email = $("#clientEmail").val();
var client_address = $("#clientAddress").val();
var client_model = new Client({ FirstName: client_firstName, LastName: client_lastName, Email: client_email, Address: client_address });
this.clients.add(client_model);
$("#clientFirstName, #clientLastName, #clientEmail, #clientAddress").val("");
$("#addClientModal").modal("hide");
}
});
私のテンプレート:
<script id="Client-Template" type="text/template">
<tr>
<td><%=FirstName%></td>
<td><%=LastName%></td>
<td><%=Address%></td>
<td>
<input type="button" class="btn btn-info .edit-client" value="Edit" />
<input type="button" class="btn btn-danger" value="Delete" />
</td>
</tr>
</script>
残念ながら、アプリケーション全体をペーストビン化することはできませんが、運が良ければ、提供したもののどこが間違っているかに気付くのは比較的簡単です。もちろん、私からの詳細が必要な場合は、質問してください。