0

I'm using backbone.js. I'm trying to make an interactive table where the users will be able to edit some information directly from within the table. I will use JS and CSS to hide the input elements in the code bellow and show them only when the user clicks on a label element. After they edit the value of an input element and press the enter key I need to run

model.save({'property_changed': input.value});

but for me to change the model, first I need to find which model I should update by relating the model to an attribute of the input element. But how? Which attribute should I use, name? If so, which value should it have, name="company_2_name"(id=2,name being the property I want to change)?

<table class="table table-striped">
<thead>
        <tr>
            <th>id</th>
            <th>Name</th>
            <th>Department</th>
            <th>Origin</th>
            <th>Headquarters</th>
            <th>Email</th>
            <th>Twitter</th>
            <th>Description</th>
            <th></th>
        </tr>
</thead>
<tr>
    <td></td>
    <td><label>name</label><input class="edit" value="name" name="new"></td>
    <td><label>department</label><input class="edit" value="department" style="width: auto;"></td>
    <td><label>origin</label><input class="edit" value="origin"></td>
    <td><label>headquarters</label><input class="edit" value="headquarters"></td>
    <td><label>email</label><input class="edit" value="email"></td>
    <td><label>twitter</label><input class="edit" value="twitter"></td>
    <td><labe>create</labe><input class="edit" value="create"></td>
    <td><button type="button" class="btn btn-default">Add</button></td>
</tr>
<tr>
    <td><label><%= id %></label><input class="edit" value="<%= id %>"></td>
    <td><label><%= name %></label><input class="edit" value="<%= name %>"></td>
    <td><label><%= department %></label><input class="edit" value="<%= department %>"></td>
    <td><label><%= origin %></label><input class="edit" value="<%= origin %>"></td>
    <td><label><%= headquarters %></label><input class="edit" value="<%= headquarters %>"></td>
    <td><label><%= email %></label><input class="edit" value="<%= email %>"></td>
    <td><label><%= twitterId %></label><input class="edit" value="<%= twitterId %>"></a></td>
    <td><label><%= description %></label><input class="edit" value="<%= description %>"></td>
    <td><button type="button" class="btn btn-default">Remove</button> </td>
</tr>

Yuri Borges
  • 315
  • 4
  • 14
  • Please correct me if I'm wrong, but I just realized that it may be a better idea to use each row as a view rather than having all this input elements in the same view. Then I can add events to that view and when it's time to save the new information I just call this.model.save() – Yuri Borges Apr 08 '14 at 18:22
  • where did you get eight from??? each model corresponds to a company, which have the following attributes: name, department, origin, headquarters, email, twitterId, description.. the number of models will correspond the amount of companies in my DB table, so that amount will grow dynamically – Yuri Borges Apr 08 '14 at 18:34
  • but as I said, the first idea coming from my newbie head was to have one view and lots of models, rather than one view for each model – Yuri Borges Apr 08 '14 at 18:39
  • Thank you very much! Now I know where you got eight from.. It's indeed an unclear question. I didn't know how to explain the problem very well. When the user enters some input the model should be updated right away, hence it makes more sense to me to call this.model.save(). So, what are the benefits of having a collection for the whole thing in this case? – Yuri Borges Apr 08 '14 at 18:55

0 Answers0