从javascript代码调用实现{{#linkTo ...}}帮助程序的成员函数

时间:2013-10-30 09:45:51

标签: ember.js ember-router

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

<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>

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

  1. 重用{{#linkTo ...}}助手
  2. 中实施的现有html呈现
  3. 获取使用模板中的{{#linkTo ...}}提供的相同路由支持。
  4. 如何在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;
        }
    
    });
    

0 个答案:

没有答案
相关问题