1

我正在尝试替换此导航菜单:

<nav>
    {{#linkTo "nodes"           }}<i class="icon-fixed-width icon-cloud               icon-2x"></i>&nbsp;&nbsp;{{t generic.nodes}} {{grayOut "(temporal)"}}{{/linkTo}}
    {{#linkTo "services"        }}<i class="icon-fixed-width icon-phone               icon-2x"></i>&nbsp;&nbsp;{{t generic.services}}{{/linkTo}}
    {{#linkTo "agents"          }}<i class="icon-fixed-width icon-headphones          icon-2x"></i>&nbsp;&nbsp;{{t generic.agents}}{{/linkTo}}
    {{#linkTo "extensions"      }}<i class="icon-fixed-width icon-random              icon-2x"></i>&nbsp;&nbsp;{{t generic.extensions}}{{/linkTo}}
    {{#linkTo "voiceMenus"      }}<i class="icon-fixed-width icon-sitemap             icon-2x"></i>&nbsp;&nbsp;{{t generic.voicemenus}}{{/linkTo}}
    {{#linkTo "queues"          }}<i class="icon-fixed-width icon-tasks               icon-2x"></i>&nbsp;&nbsp;{{t generic.queues}}{{/linkTo}}
    {{#linkTo "contacts"        }}<i class="icon-fixed-width icon-user                icon-2x"></i>&nbsp;&nbsp;{{t generic.contacts}}{{/linkTo}}
    {{#linkTo "accounts"        }}<i class="icon-fixed-width icon-building            icon-2x"></i>&nbsp;&nbsp;{{t generic.accounts}}{{/linkTo}}
    {{#linkTo "locators"        }}<i class="icon-fixed-width icon-phone-sign          icon-2x"></i>&nbsp;&nbsp;{{t generic.locators}}{{/linkTo}}
    {{#linkTo "phonelocations"  }}<i class="icon-fixed-width icon-globe               icon-2x"></i>&nbsp;&nbsp;{{t generic.phonelocations}}{{/linkTo}}
    {{#linkTo "billing"         }}<i class="icon-fixed-width icon-euro                icon-2x"></i>&nbsp;&nbsp;{{t generic.billing}}{{/linkTo}}
    {{#linkTo "profile"         }}<i class="icon-fixed-width icon-cogs                icon-2x"></i>&nbsp;&nbsp;{{t generic.profile}}{{/linkTo}}
    {{#linkTo "audio"           }}<i class="icon-fixed-width icon-music               icon-2x"></i>&nbsp;&nbsp;{{t generic.audio}}{{/linkTo}}
    {{#linkTo "editor"          }}<i class="icon-fixed-width icon-puzzle-piece        icon-2x"></i>&nbsp;&nbsp;{{t generic.node_editor}}{{/linkTo}}
</nav>

具有更动态的版本。我想做的是重现里面的 html Ember.View.render,但我想尽可能多地重用 Ember 功能。具体来说,我想重用{{#linkTo ...}}助手,有两个目标:

  1. {{#linkTo ...}}重用helper中实现的现有 html 渲染
  2. {{#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>&nbsp;&nbsp;' + 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;
    }

});
4

0 回答 0