Làm thế nào để sử dụng các biến chuỗi trong trình trợ giúp ember (linkTo hoặc một phần)?

Question

Tôi cần thiết lập mảng liên kết menu trong bộ định tuyến và sau đó hiển thị chúng trong mẫu bằng #each. Nhưng có vẻ như #linkĐể trợ giúp không nhận ra các biến. làm sao tôi có thể giải quyết việc này?

Router:

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'} ]) 
    } 
}) 

Liên kết render trong các ứng dụng mẫu:

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

Thông báo lỗi:

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

Ember phiên bản:

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

Answer 1

Nếu bạn vẫn đang phải vật lộn với tùy chọn ken, bạn có thể muốn thử một cái gì đó như thế này:

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

Và sau đó bạn sẽ cần hàm goToLink để xử lý tác vụ. Bạn có thể đặt nó trên Bộ sưu tập của bạn, nhưng nếu bạn không, nó là vụ phải bong bóng lên đến xử lý tuyến đường của bạn, trong đó, về mặt lý thuyết, nên làm cho mọi việc thực sự dễ dàng:

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

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

Bạn có thể đọc thêm về Hoạt động , ở đây: http://emberjs.com/guides/templates/actions/

cập nhật

tôi đã đặt cùng một fiddle cho bạn, sử dụng mới nhất và vĩ đại nhất Ember.

Tôi đã thực hiện một thay đổi nhỏ về đề xuất ở trên, do một số giới hạn kỹ thuật mà tôi đã phát hiện.

Cụ thể, Tuyến đường chỉ có vẻ như có thể xử lý các hành động cho các trình điều khiển được tạo trong nội bộ bằng Tuyến đường. Đây là một vấn đề đối với menu điều hướng của chúng tôi, vì bạn đang thay đổi tuyến đường, trong khi nó vẫn còn trên màn hình.

Nếu tôi chuyển sang sử dụng trình trợ giúp "hiển thị" Handlebars để hiển thị menu, không có Bộ định tuyến nào sẵn sàng xử lý tác vụ. Tuy nhiên, bộ định tuyến hiện tại dường như luôn được nối trong chuỗi bong bóng để gửi "" trên bộ điều khiển. Vì vậy, tôi chỉ có bộ điều khiển gửi một sự kiện lên chuỗi để Router, và chúng tôi nhận được hạnh phúc định tuyến của chúng tôi.

Bạn có thể tìm fiddle, ở đây: http://jsfiddle.net/Malkyne/fh3qK/

Cập nhật 2

Dưới đây là một phiên bản của fiddle cùng, chỉ với (thật là thú vị không có giấy tờ) ApplicationRoute được sử dụng để trực tiếp xử lý các hành động, nếu không có bộ điều khiển phải thực hiện bất kỳ chuyển tiếp nào: http://jsfiddle.net/Malkyne/ydTWZ/

Answer 2

Bạn không thể sử dụng biến bên linkto helper, bạn cần phải sử dụng bindAttr trên một thẻ neo thay

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

Answer 3

Do Ember.js RC6, có thể định cấu hình Ember để tra cứu các tuyến dưới dạng thuộc tính thay vì diễn giải chúng dưới dạng giá trị mã hóa cứng. Tính đến RC6.1, điều này đòi hỏi một biến môi trường để được xác định:

ENV.HELPER_PARAM_LOOKUPS = true 

trước khi Ember.js được tải. Để biết thêm chi tiết, vui lòng xem yêu cầu kéo sau: Quoteless route param in linkTo performs lookup

Dưới đây là một ví dụ làm việc đầy đủ như là một jsFiddle:

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

Answer 4

chủ đề này không phải là quá gần đây và tôi không biết nếu hầu hết các phiên bản gần đây của Ember trình bày một giải pháp khác cho vấn đề này nhưng trên phiên bản Ember 1.11 nó hoạt động tốt.

Giải pháp là nội tuyến phiên bản link-to.

Nó hoạt động giống như trình trợ giúp (có, nó sẽ chuyển đổi lớp active cho bạn tùy thuộc vào tuyến đường hiện tại của bạn) và cho phép bạn chuyển các tham số động. Mô phỏng tình huống của tác giả, chúng ta sẽ có một cái gì đó như:

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

Chi tiết giáp phương pháp này có thể được tìm thấy here.