Chọn mẫu xem theo kiểu kiểu/giá trị đối tượng bằng cách sử dụng Ember.js

Question

Tôi muốn lưu trữ các đối tượng khác nhau trong cùng một mảng nội dung bộ điều khiển và hiển thị từng mẫu bằng cách sử dụng mẫu xem thích hợp, nhưng lý tưởng là cùng một chế độ xem.

Tôi đang xuất các đối tượng danh sách bằng cách sử dụng mã bên dưới. Họ hiện đang giống nhau, nhưng tôi muốn có thể sử dụng những cái khác nhau.

<script type="text/x-handlebars"> 
    {{#each App.simpleRowController}} 
    {{view App.SimpleRowView class="simple-row" contentBinding="this"}} 
    {{/each}} 
</script> 

Phiên bản cắt xuống của chế độ xem bên dưới. Các chức năng khác mà tôi chưa đưa vào có thể được sử dụng cho bất kỳ đối tượng nào, bất kể mô hình. Vì vậy, tôi lý tưởng sẽ có một cái nhìn (mặc dù tôi đã đọc một số bài báo về mixins có thể giúp đỡ nếu không).

<script> 
    App.SimpleRowView = Em.View.extend({ 
    templateName: 'simple-row-preview', 
    }); 
</script> 

Thử nghiệm đầu tiên của tôi cho phép các loại đối tượng khác nhau kết thúc với nhiều điều kiện trong 'xem trước hàng đơn giản' - nó trông thật khủng khiếp!

Có cách nào kiểm soát động templateName hoặc chế độ xem được sử dụng trong khi lặp qua mảng nội dung của tôi không?

CẬP NHẬT

Cảm ơn rất nhiều để hai người được hỏi. Mã cuối cùng được sử dụng trên chế độ xem bên dưới. Một số mô hình của tôi là tương tự, và tôi thích ý tưởng có thể chuyển đổi giữa mẫu (hoặc một loại 'trạng thái') trong ứng dụng của tôi.

<script> 
    App.SimpleRowView = Em.View.extend({ 
    templateName: function() { 
     return Em.getPath(this, 'content.template'); 
    }.property('content.template').cacheable(), 
    _templateChanged: function() { 
     this.rerender(); 
    }.observes('templateName'), 
    // etc. 
    }); 
</script> 

Answer 1

Bạn có thể đặt templateName là thuộc tính và sau đó tìm ra mẫu nào sẽ sử dụng dựa trên nội dung.

Ví dụ này sử dụng instanceof để thiết lập một mẫu dựa vào loại đối tượng:

App.ItemView = Ember.View.extend({ 
    templateName: function() { 
     if (this.get("content") instanceof App.Foo) { 
      return "foo-item"; 
     } else { 
      return "bar-item"; 
     } 
    }.property().cacheable() 
}); 

Dưới đây là một fiddle với một ví dụ làm việc của trên: http://jsfiddle.net/rlivsey/QWR6V/

Answer 2

Dựa trên các giải pháp của @ rlivsey, tôi đã thêm các chức năng để thay đổi mẫu khi thay đổi sở hữu, xem http://jsfiddle.net/pangratz666/ux7Qa/

App.ItemView = Ember.View.extend({ 
    templateName: function() { 
     var name = Ember.getPath(this, 'content.name'); 
     return (name.indexOf('foo') !== -1) ? 'foo-item' : 'bar-item'; 
    }.property('content.name').cacheable(), 

    _templateChanged: function() { 
     this.rerender(); 
    }.observes('templateName') 
});