Backbone:填充表工作正常，但相应的循环数据不变

Question

我正在使用backbone来填充表，然后能够使用bootstrap中实现的模态来编辑内容。该表可以很好地填充，但在模式上单击编辑时，所有字段都只包含第一个条目的数据

这是代码，

<tbody> 
                         <%  users.each(function(user){ %>
                            <tr>                                
                                <td>
                                    <%= user.get("first_name") %>
                                </td>
                                <td><%= user.get("last_name") %></td>                           
                                <td><%=  user.get("gender") %></td>
                                <td >
                                    24 years                                
                                </td>
                                <td >
                                    <%=  user.get("email") %>                               
                                </td>
                                <td class="hidden-480">
                                    <%=  user.get("phone_number")%>                             
                                </td>
                                <td class="hidden-480">
                                    <%=  user.get("role") %>                                
                                </td>

                                <td>
                                    <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                                        <a href="#modal-form" role="button" class="blue" data-toggle="modal"> 
                                            <i class="icon-pencil bigger-130" id="user_edit" ></i>
                                        </a>
                                        <a class="red" href="#">
                                            <i class="icon-trash bigger-130" id="user_delete" ></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>                       
                            <div id="modal-form" class="modal" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h4 class="blue bigger">Edit User</h4>
                                        </div>
                                        <div class="modal-body overflow-visible">
                                            <div class="row">
                                                <div class="col-xs-12">         
                                                    <form class="form-horizontal" role="form">
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> First Name </label>

                                                            <div class="col-sm-9">
                                                                <input type="text" id="user_first_name" value=<%= user.get("first_name")%> class="col-xs-10 col-sm-10" />
                                                            </div>
                                                        </div><br>
                                                        <div class="space-4"></div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Last Name </label>

                                                            <div class="col-sm-9">
                                                                <input type="text" id="user_last_name" value=<%= user.get("last_name")%> class="col-xs-10 col-sm-10" />
                                                            </div>
                                                        </div> <br>
                                                        <div class="space-4"></div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Date of Birth </label>

                                                            <div class="col-sm-9">
                                                                <input type="text" id="user_date_of_birth" value=<%= user.get("date_of_birth")%> class="col-xs-10 col-sm-10" />
                                                            </div>
                                                        </div><br>
                                                        <div class="space-4"></div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Gender </label>
                                                            <div class="col-sm-9">
                                                                <select id="user_gender" class="col-xs-10 col-sm-10 ">
                                                                    <option value="Male">Male</option>
                                                                    <option value="Female">Female</option>                                      
                                                                </select>
                                                            </div>
                                                        </div><br>
                                                        <div class="space-4"></div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Phone Number </label>

                                                            <div class="col-sm-9">
                                                                <input type="text" id="user_phone_number" value=<%= user.get("phone_number")%> class="col-xs-10 col-sm-10" />
                                                            </div>
                                                        </div><br>
                                                        <div class="space-4"></div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> E-mail Address </label>

                                                            <div class="col-sm-9">
                                                                <input type="text" id="user_email" value=<%= user.get("email")%> class="col-xs-10 col-sm-10" />
                                                            </div>
                                                        </div><br>
                                                        <div class="space-4"></div>

                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> 
                                                                Password 
                                                            </label>
                                                            <div class="col-sm-9">
                                                                <input id="user_password" class="col-xs-10 col-sm-10" type="password">
                                                            </div>
                                                        </div><br>
                                                        <div class="space-4"></div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> 
                                                                Confirm Password 
                                                            </label>

                                                            <div class="col-sm-9">
                                                                <input id="password_confirmation" class="col-xs-10 col-sm-10" type="password">                      
                                                            </div>
                                                        </div> <br>

                                                        <div class="clearfix form-actions">
                                                            <div class="col-md-offset-3 col-md-9">
                                                                <button class="btn btn-info" type="button" id="user_submit">
                                                                    <i class="icon-ok bigger-110"></i>
                                                                    Submit
                                                                </button>

                                                                &nbsp; &nbsp; &nbsp;
                                                                <button class="btn" type="reset">
                                                                    <i class="icon-undo bigger-110"></i>
                                                                    Reset
                                                                </button>
                                                            </div>
                                                        </div>

                                                        <div class="hr hr-24"></div>                                
                                                    </form>                                             
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>      
                        <% }); %>  
                    </tbody>

Answer 1

在您的循环中，您为模态分配了一个ID，这为它们提供了所有相同的ID。也许bootstrap JS只显示它找到的第一个，这就是为什么您每次都看到相同的一个。也许你，如果你附加了用户的ID或其他唯一的东西到模式的ID，这将会起作用。

例如：

<div id="modal-form" class="modal" tabindex="-1">

和

<a href="#modal-form" role="button" class="blue" data-toggle="modal">

可以更改为：

<div id="modal-form-<%= user.get('id') %>" class="modal" tabindex="-1">

和

 <a href="#modal-form-<%= user.get('id') %>" role="button" class="blue" data-toggle="modal">