1

テンプレートの1つが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はこの混乱を簡単に処理できることを私は知っています。だから本質的に私は専門家から知りたいのですが、彼らはそのようなシナリオで何をしますか？彼らはどのようにアプリケーションを構築しますか？私はこのフロントエンドフレームワークの初心者です。

4

2 に答える 2

4

テンプレートで使用する代わりに、_.eachテーブルの行ごとに1つのビューを使用します。これは、各ビューに多少の複雑さ（編集、削除）があるためです。

これらのビューでは、eventsハッシュを使用してDOMイベントを登録します。HTMLで使用onclickしないでください。これは本当に悪い習慣です。

アプリを整理する方法のアイデアについては、TodoMVCバックボーンの例をご覧ください。

于 2013-01-24T15:54:25.777 に答える
0

私も初めてバックボーンアプリケーションを開発していて、まったく同じ間違いを経験しました。

私は最初に、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

于 2013-03-01T04:44:21.020 に答える