Ember.js：替換簡單的鏈接到視圖幫手

Question

我有一個應用程序內置了基本的功能。我沒有通過並添加額外的功能。在這種情況下，我需要將當前使用linkTo的簡單按鈕轉換爲視圖。問題是我不知道如何將其中一個轉換爲另一個，並保持鏈接不變。

我該如何做這種轉換？下面的代碼我現在有：

<script type="text/x-handlebars" data-template-name="accountItem"> 
{{#each account in controller}} 
    {{#linkTo "account" account}} 
     <img {{bindAttr src="account.icon"}} /> 
    {{/linkTo}} 
{{/each}} 
</script> 

和這裏的代碼，我將有：

<script type="text/x-handlebars" data-template-name="accountItem"> 
{{#each account in controller}} 
    {{#view "Social.AccountButtonView"}} 
     <img {{bindAttr src="account.icon"}} /> 
    {{/view}} 
{{/each}} 
</script> 

Social.AccountButtonView = Ember.View.extend({ 
    tagName: 'a', 
    classNames: ['item-account'], 
    click: function(){ 
     // do something 
    } 
}); 

我會承擔，我會在點擊處理程序的頂部視圖中建立，但我不確定如何將參考傳遞給正在迭代的項目，也不知道如何在View中引用正確的路線。

請幫忙嗎？

更新1

第一個版本呈現基於所述路由器A的#/accounts/4值我已成立href屬性：

Social.Router.map(function() { 
    this.resource('accounts', function(){ 
     this.resource('account', { path: ':account_id'}); 
    }); 
}); 

當我的當前代碼轉換爲一個視圖，我如何模仿linkTo提供的功能？

Answer 1

您可以在車把模板中爲account定義屬性綁定。 這種結合是這樣的：

<script type="text/x-handlebars"> 
    <h1>App</h1> 
    {{#each item in controller}} 
     {{#view App.AccountView accountBinding="item"}} 
      <a {{bindAttr href="view.account.url"}} target="_blank"> 
       {{view.account.name}} 
      </a> 
     {{/view}} 
    {{/each}} 
</script> 

請注意，我說accountBinding，所以一般的規則是propertyName和Binding作爲後綴。請記住，當您將某個媒體資源添加到視圖時，您將無法直接訪問該媒體資源，而必須使用view.propertyName才能訪問該媒體資源，如上所示。

只要記住使用{{view}}幫手時，你必須有一個View類：

window.App = Em.Application.create(); 
App.AccountView = Em.View.extend(); // this must exist 
App.ApplicationRoute = Em.Route.extend({ 
    model: function() { 
     return [ 
      {id: 1, name: 'Ember.js', url: 'http://emberjs.com'}, 
      {id: 2, name: 'Toronto Ember.js', url: 'http://torontoemberjs.com'}, 
      {id: 3, name: 'JS Fiddle', url: 'http://jsfiddle.com'}];  
    } 
}) 

工作小提琴：http://jsfiddle.net/schawaska/PFxHx/

在應對更新1：

我發現我自己在類似的情況下，並最終創建一個子視圖來模仿{{linkTo}}幫手。我不知道/認爲這是最好的實施方法。 你可以看到我以前的代碼在這裏：http://jsfiddle.net/schawaska/SqhJB/

在我創造了ApplicationView內的孩子認爲，時間：

App.ApplicationView = Em.View.extend({ 
    templateName: 'application', 
    NavbarView: Em.View.extend({ 
    init: function() { 
     this._super(); 
     this.set('controller', this.get('parentView.controller').controllerFor('navbar')) 
    }, 
    selectedRouteName: 'home', 
    gotoRoute: function(e) { 
     this.set('selectedRouteName', e.routeName); 
     this.get('controller.target.router').transitionTo(e.routePath); 
    }, 
    templateName: 'navbar', 
    MenuItemView: Em.View.extend({ 
     templateName:'menu-item', 
     tagName: 'li', 
     classNameBindings: 'IsActive:active'.w(), 
     IsActive: function() { 
     return this.get('item.routeName') === this.get('parentView.selectedRouteName'); 
     }.property('item', 'parentView.selectedRouteName') 
    }) 
    }) 
}); 

和我把手看起來像這樣：

<script type="text/x-handlebars" data-template-name="menu-item"> 
    <a {{action gotoRoute item on="click" target="view.parentView"}}> 
    {{item.displayText}} 
    </a> 
</script> 

<script type="text/x-handlebars" data-template-name="navbar"> 
    <ul class="left"> 
    {{#each item in controller}} 
     {{view view.MenuItemView itemBinding="item"}} 
    {{/each}} 
    </ul> 
</script> 

我對不起，我不能給你一個更好的答案。這是我當時所能想到的，從此以後一直沒有觸及它。就像我說的，我不認爲這是處理它的方法。如果你願意看看{{linkTo}} helper source code，你會看到一個模塊化和優雅的實現，可能是你自己實現的基礎。我猜你正在尋找的部分是被像這樣定義的href屬性：

var LinkView = Em.View.extend({ 
... 
    attributeBindings: ['href', 'title'], 
    ... 
    href: Ember.computed(function() { 
     var router = this.get('router'); 
     return router.generate.apply(router, args(this, router)); 
    }) 
... 
}); 

所以我想，從那裏你可以理解它是如何工作和實施自己的東西。讓我知道這是否有幫助。