我正在尝试替换此导航菜单:
<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 ...}}
助手,有两个目标:
{{#linkTo ...}}
重用helper中实现的现有 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;
}
});