Question

我正在开发一个应用程序，其中我的一个模板呈现一个包含n行的表。现在在每一行中，我都有一个包含编辑和删除按钮的列。

单击编辑时，某个div中的同一窗口中会出现一个编辑表单。该表单需要填充从后端获取的值。

现在没什么了不起的。我的问题是：

我有一个视图，它使用以下模板结构呈现整个表：

<script type="text/template" id="ledgersing"> 

 <div class="span6 widget"> 
 <div class="widget-header"> 
 <span class="title">Ledgers</span> 
<button class="btn btn-danger pull-right" id="addLedgerButton">Add Ledger</button> 
</div> 

 <div class="widget-content"> 

 <table width="100%" class="table table-striped dataTable"> 
 <thead> 
 <tr><th>Name</th><th>Email</th><th>Phone</th><th>Action</th></tr> 
 </thead> 
<tbody> 
<% _.each(ledgers,function(data){ %>
<tr>
    <td><%= data.name %></td>
    <td><%= data.email %></td>
    <td><%= data.contact_number %></td>
    <td><span onClick="alert(<%= data.id %>)">x</span></td>
</tr>
<% }) %>
</tbody>

</table> 
</div> 

 </div> 


 </div >
 </script>

在此，它只是在点击x时提醒id。现在我需要像这样使用onClick事件吗？我的意思是我将需要在我用于处理的任何构造中的id。什么是更好的解决方案？我知道如果应用程序结构正确，backbonejs可以轻松处理这个混乱。基本上我想从专家那里了解到，他们将在这种情况下做些什么。他们将如何构建应用程序？我是这个前端框架的新手。

Answer 1

不是在模板中使用_.each，而是每个表格行使用一个视图，因为每个表格都有一些复杂性（编辑，删除）

在这些视图中，您使用events哈希来注册DOM事件。不要在HTML中使用onclick，这是一种非常糟糕的做法。

请不要犹豫，查看TodoMVC Backbone example有关如何整理应用的建议。

Answer 2

我也是第一次开发骨干应用程序并且遇到了完全相同的错误。

我首先尝试将我的php / asp / ruby / whatever_server_side_template_technology翻译成下划线模板，并获得与你所拥有的非常相似的东西。

现在我意识到这是一个错误。您应该使用子视图。事件和关联的模型将连接到该子视图。很快你就会有很多视图来监听事件并在数据发生变化时自行更新，但是如果你小心的话就可以了。

这是我正在处理的演示应用：https://bb-jugar.rhcloud.com/index.html#Wine 这是github回购：https://github.com/opensas/BackboneBootstrap

这就是我解决它的方式：https://github.com/opensas/BackboneBootstrap/blob/master/demoapp/js/src/views/crud/RowsView.js

如何构建backbonejs应用程序 - 在每个表行backbonejs上单击事件

2 个答案: