0

そのため、いくつかのオブジェクトをレンダリングするためのテンプレートを使用して、Backbone.js に基づくアプリケーションを構築しています。

それは機能していますが、実行時にオブジェクトを動的に参照する必要があり、javascript を「平坦化」する、私が見たテンプレート ソリューション (アンダースコア、ハンドルバーなど) でそれが可能かどうかはわかりません。

説明するために、オブジェクトのリストがあります。たとえば、タスクとしましょう。私はそのように単純化できるモデルを持っています:

{{#each tasks.models as |task|}}
<div>
{{task.name}}
</div>
{{/each}}

ここで、レンダリングが終了した後、「タスク」オブジェクトを動的に使用する必要があります。たとえば、次のようにします。

<div>
{{task.name}} - <button onClick="task.setComplete()" />
</div>

もちろん、この方法は機能しません。{{task}}.setComplete(){{task}} はレンダリング時に文字列に変換されるため、どちらも のようなことはしません。

これを行う方法はありますか？

オブジェクトを保持するにはクロージャーが必要だと思っていました。オブジェクトを取得する唯一の方法は、html を平坦化しないことです。それ以外の場合はすべてが文字列に変換されます。

何か案が？ドキュメントに追加できる DOM オブジェクトを直接生成できるテンプレート ライブラリはあるのでしょうか。

前もって感謝します、

4

2 に答える 2

1

私の答えは単なるヒントです。私は質問に近づこうとしました。より良い解決策については、 https ://stackoverflow.com/a/32493586/1636522 の回答を参照してください。

インデックスまたはその他の情報を使用して、アイテムを見つけることができます。各タスクを ID で識別できると仮定して、Handlebars を使用した例を次に示します。

var tasks = [];
var source = $('#source').html();
var template = Handlebars.compile(source);
tasks[0] = { id: 42, label: 'coffee', description: 'Have a cup of coffee.' };
tasks[1] = { id: 13, label: 'help', description: 'Connect to StackOverflow.' };
tasks[2] = { id: 40, label: 'smile', description: 'Make μ smile.' };
$('#placeholder').html(template({ tasks: tasks }));

function onClick (id) {
  var task, i = 0, l = tasks.length;
  while (i < l && tasks[i].id !== id) i++;
  if (i === l) {
    // not found
  }
  else {
    task = tasks[i];
    alert(task.label + ': ' + task.description);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.2/handlebars.min.js"></script>
<script id="source" type="text/x-handlebars-template">
  {{#each tasks}}
  <button 
    type="button" 
    class="task" 
    style="margin-right:.5em"
    onclick="onClick({{id}})"
  >{{label}}</a>
  {{/each}}
</script>
<div id="placeholder"></div>

于 2015-09-08T17:58:54.340 に答える