私はまだ ember.js を学習しようとしているので、ご容赦ください。
目的
現在、1 ページの Web アプリケーションを作成しています。アプリケーションが ajax 呼び出しを実行すると、アプリケーションは数字のリストを返します。アプリケーションはこれらの数値を処理し、数値ごとに div を作成して div コンテナーに格納します。
クリック イベントは各 div に関連付けられるため、ユーザーがリンクをクリックすると、ポップアップ ダイアログが表示されます。
コード
索引.html
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="payloads">
<div class="page">
<div id="desktopWrap">
<div id="theaterDialog" title="Theater View" class="bibWindow1">
{{view.name}}
{{#each item in model}}
<div {{bindAttr id="item"}} {{action click item}}>
<div class="thumb1" ></div>
<div class="userDetails1">Payload {{item}}</div>
<div class="online1" ></div>
</div>
<div class="spacer10"></div>
{{/each}}
</div>
</div>
</div>
</script>
私のapp.jsファイルはここにあります：
App = Ember.Application.create();
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['Payload_1', 'Payload_2', 'Payload_3'];
}
});
App.PayloadsRoute = Ember.Route.extend({
model: function() {
return ['Payload_1', 'Payload_2', 'Payload_3'];
}
})
App.IndexController = Ember.ObjectController.extend(
{
click: function(e)
{
alert("clicked:" + e);
}
})
一般的なアイデア
上記の現在のコードは、3 つの div を持つ "theaterDialogue" div ボックスを作成します。onclick アクションは、これらの div ごとに Controller を介して関連付けられます。ユーザーが最初のdiv「ペイロード1」をクリックすると、アラートボックスに印刷され、2番目のdiv「ペイロード2」などが印刷されます。印刷の代わりに、新しいダイアログボックス(jqueryダイアログボックス)をレンダリングできるようにしたいテンプレートからコンテンツがレンダリングされる場所。これがどのように行われるかはわかりません...ビューがテンプレートのデータを保存するために使用されることは理解しています...しかし、アクションによって生成されたテンプレート内にテンプレートをネストする方法はわかりませんか?
もしあなたが私に誰かを指し示すことができれば、それは素晴らしいことです!
アドバイスをいただければ幸いです、D