Call an member function implementing the {{#linkTo ...}} helper from javascript code
- by gonvaled
I am trying to replace this navigation menu:
<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>
With a more dynamic version. What I am trying to do is to reproduce the html inside Ember.View.render, but I would like to reuse as much Ember functionality as possible. Specifically, I would like to reuse the {{#linkTo ...}} helper, with two goals:
Reuse existing html rendering implemented in the {{#linkTo ...}} helper
Get the same routing support that using the {{#linkTo ...}} in a template provides.
How can I call this helper from within javascript code? This is my first (incomplete) attempt. The template:
{{view SettingsApp.NavigationView}}
And the view:
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;
}
});
