backbone.js绑定到渲染按钮

时间:2012-05-21 23:59:52

标签: backbone.js

我已经开始使用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>

不幸的是我无法将整个应用程序粘贴到一起,但运气好的话,应该相对简单地注意到我所提供的内容出错了。显然,如果您需要我提供更多详细信息,请询问。

1 个答案:

答案 0 :(得分:1)

按钮上的class属性中有一个错误的点(。)

.edit-client

应该是

edit-client