Question

I have started to create a web application with backbone.js and have run into a bit of a problem. It is allowing me to create new items, no problem at all. However, it is not binding the events to buttons created on the render() method. Basically, each time I add a new item, I get an Edit and Delete button, and I would like to bind the model to them so I can retrospectively Edit or Delete that specific item.

My backbone view:

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");
    }
});

My template:

<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>

Unfortunately I cannot pastebin the entire application, but with any luck it should be relatively simple to notice where I am going wrong with what I have provided. Obviously if you need more details from me please do ask.

Answer 1

You have an erroneous dot (.) in your class attribute on your button

.edit-client

should be

edit-client