我需要在路由器中設置菜單鏈接數組，然後使用#each將它們呈現在模板中。但似乎像#linkTo幫手不識別變量。我該如何解決這個問題？如何在燼助手中使用字符串變量（linkTo或partial）？

路由器：

Lite.DashboardRoute = Em.Route.extend({ 
    setupController: function(controller, model) { 
    this.controllerFor('application').set('mainControls', [ {path: 'widgets.new', name: 'Add', classes: 'btn btn-success icon-ok-sign'} ]) 
    } 
})

鏈接的應用程序模板渲染：

{{#each link in mainControls}} 
    {{#linkTo link.route class=link.classes}} {{link.name}} {{/linkTo}} 
{{/each}}

錯誤消息：

ember.debug.js:51 Error: assertion failed: The route link.route was not found

灰燼版本：

// Version: v1.0.0-pre.4 
// Last commit: 855db1a (2013-01-17 23:06:53 -0800)

來源

2013-02-11 hoblin

似乎'linkTo'幫手認識到第一個參數是逐字路由名稱，而不是變量的名稱.. – 2013-02-11 14:11:56

是的，但我怎樣才能呈現鏈接與不同的網址列表？ – hoblin 2013-02-11 16:09:32

如果你仍然肯的選項掙扎，你可能會想嘗試這樣的：

{{#each link in mainControls}} 
    <a {{action "goToLink" link}} {{bindAttr class="link.classes"}}> 
     {{link.name}} 
    </a> 
{{/each}}

然後，您將需要一個goToLink函數來處理該操作。你可以把它放在你的收藏，但如果你不這樣做，它應該是泡到你的路由處理，其中，在理論上，應該讓事情變得非常簡單：

App.MyRoute = Ember.Route.extend({ 
    // ... stuff ... 

    actions: { 
      goToLink: function(item) { 
       this.transitionTo(item.route); 
      } 
    } 
});

你可以閱讀更多關於操作在這裏：http://emberjs.com/guides/templates/actions/

更新

我已經把小提琴爲你使用最新和最偉大的灰燼。

由於我發現的一些技術限制，我對上述建議做了些許修改。

具體而言，路由似乎只能處理由路由內部創建的控制器的操作。這對我們的導航菜單是一個問題，因爲您正在更改路線，而它仍然在屏幕上。

如果我切換到使用Handlebars「渲染」助手來呈現菜單，沒有路由器似乎願意處理該操作。但是，目前的路由器似乎總是被掛在泡沫鏈上，以便在控制器上「發送」。所以，我只是讓控制器在鏈路上發送一個事件給路由器，並且我們獲得了路由選擇的幸福。

您可以找到小提琴，在這裏：http://jsfiddle.net/Malkyne/fh3qK/

更新2

這裏是一樣的小提琴的另一版本，只與（古怪無證）ApplicationRoute被用來直接處理的動作，無需控制器進行任何中繼：http://jsfiddle.net/Malkyne/ydTWZ/

來源

2013-02-16 11:44:06 Tess

你做了令人印象深刻的工作，只是回答某人的問題。謝謝=）這是一個很好的解決方案，至少現在我使用的是一個更好的方法（我將每個可能的鏈接與包含在#if塊中的硬編碼路徑一起渲染）。無論如何，我會在ember.js github上添加功能請求，以增加對ember助手的變量名稱的支持。但在那之前我會用你的解決方案。再次感謝=） – hoblin 2013-02-17 15:08:32

你可以添加一個'active'類到當前項目嗎？ – 2013-02-28 15:38:40

Willem，事實證明** ApplicationController **上有一個非常方便的（可能未被記錄的）屬性，被稱爲** currentPath **。這包含您當前的路線路徑。你可以用一個**需求來創建一個MenuItemController：['application'] **，並使用你想要的任何邏輯引用** controllers.application.currentPath **屬性（比如將它與你的路由進行比較值）。我已經爲你製作了一個上述小提琴的模型，所以你可以看到這個在行動：http://jsfiddle.net/Malkyne/fRsAv/ – Tess 2013-03-06 08:22:18

不能使用linkTo助手裏面的變量，你需要使用bindAttr一個錨標記，而不是

<a {{bindAttr href="link.route" class="link.classes"}}>link</a>

來源

2013-02-11 17:50:19 ken

我試過了。但是這個鏈接並不作爲燼鏈接。它和普通鏈接一樣工作。 – hoblin 2013-02-11 18:49:09

你是什麼意思的呃鏈接，linkTo是一個常規的定位標記，支持位置API。只要link.route設置正確，鏈接應該正常工作。 – ken 2013-02-11 20:02:00

看看我對[pastie]的評論（http://pastie.org/6121367） – hoblin 2013-02-11 23:47:22

從Ember.js RC6開始，可以將Ember配置爲查找路由作爲屬性，而不是將它們解釋爲硬編碼值。截至RC6。1，這需要定義一個環境變量：

ENV.HELPER_PARAM_LOOKUPS = true

在加載Ember.js之前。有關詳細信息，請參閱以下拉請求：Quoteless route param in linkTo performs lookup

這裏是作爲一個的jsfiddle一個完整的工作示例：

Example: Using a variable in a #linkTo helper in Ember

來源

2013-08-06 20:25:11

此線也不是那麼近，我不知道是否是最新版本Ember爲這個問題提出了一個不同的解決方案，但是在Ember版本1.11上它工作正常。

解決方案是內嵌版本的link-to。

它的工作方式與助手（是的，它會根據您當前的路線爲您切換active類），並允許您傳遞動態參數。模擬作者的情況，我們會碰到這樣的：

component.js

mainControls: [ 
    { path: 'widgets.new' }, 
    { name: 'Add' }, 
    { classes: 'btn btn-success icon-ok-sign' } 
]

component.hbs

{{#each link in mainControls}} 
    {{link-to link.name link.route class=link.classes}} 
{{/each}}

更多細節緊靠這種方法可以發現here。

來源

2016-10-06 19:22:32 iorrah

如何在燼助手中使用字符串變量（linkTo或partial）？

回答

更新

更新2

相關問題