Tạo liên kết lập trình bên trong chế độ xem EmberJS

Question

Tôi có một chế độ xem khá phức tạp để hiển thị liên quan đến một số loại đệ quy (danh sách lồng nhau của thư mục/tệp điển hình). Thực tế là nó chứa các đối tượng không đồng nhất (thư mục và tập tin) làm cho nó thậm chí còn khó khăn hơn để viết các mẫu Handlebars.

Do đó, giải pháp duy nhất tôi tìm thấy là tạo chế độ xem và điền thủ công bộ đệm hiển thị. Tôi đến với giải pháp sau:

App.LibraryContentList = Ember.View.extend({ 
    tagName: 'ol', 
    classNames: ['project-list', 'dd-list'], 

    nameChanged: function() { 
    this.rerender(); 
    }.observes('content.@each.name'), 

    render: function(buffer) { 
    // We only start with depth of zero 
    var content = this.get('content').filterProperty('depth', 0); 

    content.forEach(function(item) { 
     this.renderItem(buffer, item); 
    }, this); 
    }, 

    renderItem: function(buffer, item) { 
    switch (item.constructor.toString()) { 
     case 'App.Folder': 
     this.renderFolder(buffer, item); 
     break; 
     case 'App.File': 
     this.renderFile(buffer, item); 
     break; 
    } 
    }, 

    renderFolder: function(buffer, folder) { 
    buffer.push('<li class="folder dd-item">'); 
    buffer.push('<span class="dd-handle">' + folder.get('name') + '</span>'); 

    // Merge sub folders and files, and sort them by sort order 
    var content = this.mergeAndSort(); 

    if (content.get('length') > 0) { 
     buffer.push('<ol>'); 

     content.forEach(function(item) { 
     this.renderItem(buffer, item); 
     }, this); 

     buffer.push('</ol>'); 
    } 

    buffer.push('</li>'); 
    }, 

    renderFile: function(buffer, album) { 
    buffer.push('<li class="album dd-item">'); 
    buffer.push('<span class="dd-handle">' + file.get('name') + '</span>'); 
    buffer.push('</li>'); 
    } 
}); 

Bây giờ, điều tôi muốn là có thể thêm liên kết để mỗi thư mục và mỗi tệp có thể nhấp và chuyển hướng sang một tuyến đường khác. Nhưng làm thế nào tôi phải làm điều đó, vì tôi không có quyền truy cập vào linkTo helper? Tôi đã thử chơi với chế độ xem LinkView nhưng không thành công. Tôi có nên đăng ký trình xử lý theo cách thủ công cho từng mục không?

Tôi cũng đã nghĩ về việc phá vỡ điều đó bằng một CollectionView thay vào đó, và chia nhỏ nội dung theo chiều sâu để tôi có thể hiển thị nó bằng cách sử dụng mẫu, nhưng có vẻ phức tạp hơn.

Mọi suy nghĩ?

Answer 1

Nó xảy ra với tôi rằng người trợ giúp linkTo có thể không phải là cách tốt nhất để tiếp cận điều này. Tất cả các linkTo là router.transitionTo, tự động giải quyết đường dẫn khi cần thiết cộng với thiết lập thuộc tính css active tự động css tự động.

Trong trường hợp của bạn, bạn đã có danh sách các mục và do đó mục được nhấp có thể truy cập trong chính Chế độ xem. Vì vậy, hãy tạo LinkView động hoặc ngầm qua trình trợ giúp {{#linkTo}} để xử lý mục được nhấp vào có thể không cần thiết.

Tôi sẽ trực tiếp thiết lập old-skool data-some-id trên neo mục được tạo. Sau đó, trong chế độ xem xử lý nhấp chuột, hãy tính mục nào tương ứng với việc sử dụng dataset.someId và sau đó transitionToRoute mục đó, trực tiếp trong chế độ xem hoặc qua gotoItem trên bộ điều khiển.

Nếu có nhiều mục như vậy, điều này sẽ tiết kiệm đáng kể, về số lượng phần tử DOM và Chế độ xem Ember.

Tôi đã thử cài đặt này với thiết lập tương tự trong số jsbin này. Tôi đã sử dụng một mẫu ProductsListView với một mẫu, nhưng cách tiếp cận sẽ tương tự với một ví dụ View có lập trình như trong ví dụ của bạn.