このナビゲーション メニューを置き換えようとしています。
<nav>
{{#linkTo "nodes" }}<i class="icon-fixed-width icon-cloud icon-2x"></i> {{t generic.nodes}} {{grayOut "(temporal)"}}{{/linkTo}}
{{#linkTo "services" }}<i class="icon-fixed-width icon-phone icon-2x"></i> {{t generic.services}}{{/linkTo}}
{{#linkTo "agents" }}<i class="icon-fixed-width icon-headphones icon-2x"></i> {{t generic.agents}}{{/linkTo}}
{{#linkTo "extensions" }}<i class="icon-fixed-width icon-random icon-2x"></i> {{t generic.extensions}}{{/linkTo}}
{{#linkTo "voiceMenus" }}<i class="icon-fixed-width icon-sitemap icon-2x"></i> {{t generic.voicemenus}}{{/linkTo}}
{{#linkTo "queues" }}<i class="icon-fixed-width icon-tasks icon-2x"></i> {{t generic.queues}}{{/linkTo}}
{{#linkTo "contacts" }}<i class="icon-fixed-width icon-user icon-2x"></i> {{t generic.contacts}}{{/linkTo}}
{{#linkTo "accounts" }}<i class="icon-fixed-width icon-building icon-2x"></i> {{t generic.accounts}}{{/linkTo}}
{{#linkTo "locators" }}<i class="icon-fixed-width icon-phone-sign icon-2x"></i> {{t generic.locators}}{{/linkTo}}
{{#linkTo "phonelocations" }}<i class="icon-fixed-width icon-globe icon-2x"></i> {{t generic.phonelocations}}{{/linkTo}}
{{#linkTo "billing" }}<i class="icon-fixed-width icon-euro icon-2x"></i> {{t generic.billing}}{{/linkTo}}
{{#linkTo "profile" }}<i class="icon-fixed-width icon-cogs icon-2x"></i> {{t generic.profile}}{{/linkTo}}
{{#linkTo "audio" }}<i class="icon-fixed-width icon-music icon-2x"></i> {{t generic.audio}}{{/linkTo}}
{{#linkTo "editor" }}<i class="icon-fixed-width icon-puzzle-piece icon-2x"></i> {{t generic.node_editor}}{{/linkTo}}
</nav>
よりダイナミックなバージョンで。私がやろうとしているのは、内部の html を再現することですがEmber.View.render、できるだけ多くの Ember 機能を再利用したいと考えています。{{#linkTo ...}}具体的には、次の2 つの目標でヘルパーを再利用したいと考えています。
{{#linkTo ...}}ヘルパーに実装されている既存の html レンダリングを再利用する{{#linkTo ...}}テンプレートで を使用した場合と同じルーティング サポートが提供されます。
javascript コード内からこのヘルパーを呼び出すにはどうすればよいですか? これは私の最初の (不完全な) 試みです。テンプレート:
{{view SettingsApp.NavigationView}}
そしてビュー：
var trans = Ember.I18n.t;
var MAIN_MENU = [
{ 'linkTo' : 'nodes', 'i-class' : 'icon-cloud', 'txt' : trans('generic.nodes') },
{ 'linkTo' : 'services', 'i-class' : 'icon-phone', 'txt' : trans('generic.services') },
];
function getNavIcon (data) {
var linkTo = data.linkTo, i_class = data['i-class'], txt = data.txt;
var html = '<i class="icon-fixed-width icon-2x ' + i_class + '"></i> ' + txt;
return html;
}
SettingsApp.NavigationView = Ember.View.extend({
menu : MAIN_MENU,
render: function(buffer) {
for (var i=0, l=this.menu.length; i<l; i++) {
var data = this.menu[i];
// TODO: call the ember function implementing the {{#linkTo ...}} helper
buffer.push(getNavIcon(data));
}
return buffer;
}
});