Ember.js: Làm thế nào để truy cập một mục cụ thể trong một CollectionView?

Question

Trước hết tôi muốn nói rằng tôi thực sự thích ember.js. Tôi đã thử cả Knockout và Angular nhưng thấy họ có chút khó chịu và mọi thứ phải được thực hiện theo cách của họ. Tôi cảm thấy như ember cho phép tôi tự do hơn một chút để cấu trúc những thứ bạn thấy phù hợp. Với điều đó, tôi có một vài câu hỏi.

. Tôi muốn làm điều gì đó như sau đó rõ ràng là không hoạt động:

<a href="/item/{{ content.id }}"><h3>{{ content.name }}</h3></a>

Thay vào đó tôi sẽ phải tạo ra một ràng buộc:

<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>

Làm thế nào để tôi tạo ra các đường dẫn URL Theo quan điểm? Tôi có thể dễ dàng tạo ra một thuộc tính tính được gọi là url trên mô hình nhưng điều đó cảm thấy khủng khiếp và không phải là MVC. Tôi có phải tạo chế độ xem mới cho phần tử hoặc đăng ký trình trợ giúp cảm thấy hơi cồng kềnh không?

Dưới đây là đoạn code hoàn chỉnh:

App = Ember.Application.create(); 

var sampleData = [ Ember.Object.create({ id: '123456789', name: 'John' }), Ember.Object.create({ id: '987654321', name: 'Anne' }) ] 

App.itemController = Ember.ArrayController.create({ 
    content: sampleData, 
    removeItem: function(item) { 
     this.content.removeObject(item); 
    } 
}); 

App.ItemListView = Ember.View.extend({ 
    itemDetailView: Ember.CollectionView.extend({ 
     contentBinding: 'App.itemController', 
     itemViewClass: Ember.View.extend({ 
      tagName: 'li', 
      url: '' // HOW TO GET '/item/123456789' 
      deleteButton: Ember.Button.extend({ 
       click: function(event) { 
        var item = this.get('content'); 
        App.itemController.removeItem(item); 
       } 
      }) 
     }) 
    }) 
}); 

<script type="text/x-handlebars"> 
    {{#view App.ItemListView}} 
     <ul id="item-list"> 
      {{#collection itemDetailView}} 
       <div class="item"> 
        <a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a> 
        {{#view deleteButton class="btn" contentBinding="content"}}Delete{{/view}} 
       </div> 
      {{/collection}} 
     </ul> 
    {{/view}} 
</script> 

. Tôi cảm thấy rằng quan điểm "sở hữu" bộ điều khiển và không phải là cách khác xung quanh. Không nên xem là không biết của bộ điều khiển nó được nối đến để bạn có thể tái sử dụng xem? Tôi đang suy nghĩ về những đường dây trong giao diện:

contentBinding: 'App.itemController',

và

App.itemController.removeItem(item);

Làm thế nào để bạn cấu trúc này?

. Tôi nhận ra tất cả mọi thứ là một công việc đang tiến triển và khá mới với sự thay đổi tên và tất cả, nhưng tài liệu là khá rõ ràng. Các ví dụ sử dụng SC tên miền cũ và có rất nhiều thứ thiếu trên emberjs.com so với các hướng dẫn Sproutcore 2.0, ví dụ như các bộ sưu tập, các bộ kiểm soát mảng. Tôi đọc ở đâu đó ở đây rằng các bộ sưu tập sẽ bị loại bỏ. Điều đó có đúng không và tôi có nên sử dụng #each để thay thế không?

Cảm ơn sự giúp đỡ của bạn và cho một khuôn khổ tuyệt vời!

Answer 1

1.) Nếu bạn muốn sử dụng <a href="...">, bạn sẽ cần một thuộc tính được tính toán. Nó có thể là trên mô hình của bạn hoặc trên một cái nhìn. Một kỹ thuật khác là sử dụng Ember.Button: {{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}

2.) Thông thường bạn sẽ muốn khai báo ràng buộc điều khiển của bạn trong khuôn mẫu, chứ không phải trong khung nhìn. Ví dụ: {{#view App.ItemListView contentBinding="App.itemController"}}

3.) Trình trợ giúp #collection có thể sẽ không được dùng nữa, vì vậy bạn có thể nên sử dụng số #each thay thế.