Ember.js - Làm cách nào để nhắm mục tiêu các cửa hàng ở chế độ xem lồng nhau/lặp lại và các phương pháp hay nhất cho bố cục ui như thế nào?

Question

Tôi đang làm việc để tái cấu trúc ứng dụng Ember kế thừa, với một chút rối loạn không mvc đối với nó. Tôi đang tìm cách giữ những thứ như mô-đun càng tốt, và tôi hy vọng sẽ tái sử dụng các thành phần ui khác nhau trong nhiều màn hình để giúp ngăn chặn trùng lặp mã.

Dường như các cửa hàng là cách tốt nhất để thực hiện việc này.

Ngay bây giờ, tôi có giao diện người dùng hiển thị một số phần tử, mỗi phần tử được hiển thị bằng chế độ xem khuôn mặt.

{{#each item in controller}} 
     {{view App.ItemThumbView}} 
{{/each}} 

Thanh bên phải của chế độ xem này là lối ra thay đổi dựa trên lựa chọn. Khi tôi chọn một mục, tôi muốn hiển thị danh sách các hoạt động chỉnh sửa trong chế độ xem phụ được templatized, khi được chọn, hãy hiển thị giao diện người dùng chỉnh sửa thích hợp thông qua một ổ cắm lồng nhau.

Về cơ bản

+---------------------------------------------------+ 
|  Parent Pane 
| 
| +------------------------------+ +----------+ 
| | Device Section    | | Sidebar | 
| |        | | [Outlet] | 
| | +--------+ +---------+  | |   | 
| | | Dev 1 | | Dev 2 |  | |   | 
| | |[outlet]| | [outlet]|  | +----------+ 
| | +--------+ +---------+  | 
| +------------------------------+ 
+--------------------------------------------------+ 

Những quan điểm lồng nhau tất cả các chia sẻ cùng một bộ điều khiển - có ý nghĩa - nhưng tôi cần để có thể kết nối một cái nhìn được lựa chọn để ổ cắm tương ứng của nó. Nỗ lực ban đầu của tôi khi kết nối các cửa hàng không bao giờ hiển thị. Các mã không thất bại ở tất cả, do đó, bộ điều khiển chỉ cập nhật một lối thoát ẩn.

Làm cách nào để nhắm mục tiêu đúng cửa hàng cho chế độ xem lồng nhau trong Ember? (Tốt nhất, tôi dường như có thể nhấn vào ổ cắm bên, nhưng không phải là lối thoát trong một mẫu thiết bị lồng nhau.) Và đây có phải là cấu trúc hợp lý để triển khai thực đơn theo ngữ cảnh ở vị trí đầu tiên không?

* Để làm rõ Với thiết lập hiện tại, mỗi mục thiết bị được hiển thị bằng cùng một mẫu. Khi được chọn, thanh bên sẽ cập nhật thông tin meta của một số thiết bị, trong khi chế độ xem thiết bị được chọn cũng sẽ kết nối ổ cắm của nó với menu chỉnh sửa. Chỉ một mục thiết bị sẽ có ổ cắm 'chỉnh sửa' được kết nối tại một thời điểm.

Có ý nghĩa khi sử dụng ổ cắm ở đây hay tôi có nên bỏ logic điều kiện vào mẫu để hiển thị menu chỉnh sửa khi cần thiết không?

Update để xác định lại thực hiện những phần tốt nhất của câu hỏi:

Outlets dường như là tuyệt vời cho tách thành phần, và nestings xem tiềm năng trong tương lai và cách nhiệt. Nhưng ngay bây giờ có vẻ như việc truy cập đúng ổ cắm cho một khung nhìn lồng nhau là hơi cồng kềnh. Hơn nữa, nếu bạn luôn biết (các) thành phần nào sẽ được lồng ghép có điều kiện trong một khuôn mẫu, có vẻ như dễ dàng chỉ cần mã hóa các khung nhìn của bạn. ví dụ:

// within template used for individual result-list items 
{{#if condition }} 
    {{view reusableSubView}} 
{{/if} 

Cách ưa thích làm việc ở đây là gì? Có bất kỳ chi phí nào để tạo ra các cửa hàng có thể không nhất thiết phải được kết nối vào mọi lúc không?

Answer 1

Được rồi, sau hàng giờ đồng hồ để chơi đùa với điều này, có vẻ như tốt nhất để có điều kiện bao gồm một cửa hàng được đặt tên ở cấp trực tiếp phía trên chế độ xem lồng nhau của tôi.

Điều này là do bạn cần một ổ cắm duy nhất, đáng tin cậy để nhắm mục tiêu trong một mẫu và dường như không có cách nào tốt để đặt tên cho một cửa hàng theo chương trình khi chạy.Hơn nữa, ổ cắm bạn hy vọng nhắm mục tiêu cần phải tồn tại ở đâu đó trong một mẫu cha mẹ trong lồng ghép các bộ định tuyến, bộ điều khiển và các mẫu được hiển thị được sử dụng để hiển thị trạng thái hiện tại của màn hình. Nếu một ổ cắm chưa được đặt bởi một đối tượng tuyến đường mẹ, bạn không thể hy vọng nhắm mục tiêu nó trong tuyến đường nút lá của bạn.

Hãy để tôi giải thích với một ví dụ:

kể từ khi tôi ban đầu được hỏi câu hỏi của tôi, giao diện người dùng của chúng tôi đã thay đổi từ một danh sách các thiết bị một danh sách những người, nhưng nguyên tắc vẫn giữ nguyên.

Tôi có danh sách những người có ảnh của họ và họ có thể được nhấp để hiển thị thêm một số thông tin bên cạnh kết quả của họ.

Tôi có một mẫu người mà trông giống như sau:

<script type="text/x-handlebars" data-template-name="people" > 
    <h3>People in this group</h3> 
    <div class="peeps"> 
     {{#each controller}} 
      {{ view App.PersonView }} 
      {{#if selected }} 
        <div class='too-personal'> 
        {{ outlet veryPersonalDetails }} 
        </div> 
      {{/if}} 
     {{/each}} 
    </div> 
</script> 

Và một người mẫu mà là kinda như thế này:

<script type="text/x-handlebars" data-template-name="person" > 
     {{#linkTo person this}} 
      <div data-desc="person-item" class="item"> 
       <div class="portrait"> 
        <img class="avatar" {{bindAttr src="gravatarUrl"}}/> 
       </div> 
       <div class="statuslabel"><span {{bindAttr class=":label statusLabel"}}>{{statusText}}</span></div> 
       <div class="cTitle">{{fullName}}</div> 
      </div> 
     {{/linkTo}}  </script> 

Và các chi tiết mẫu với các thông tin và chỉnh sửa tùy chọn bổ sung

<script type="text/x-handlebars" data-template-name="person/details" > 
various edit options  
</script> 

Khi nhấp vào kết quả của một người, bộ định tuyến của tôi sẽ chọn url cập nhật và sơ khai trong mẫu chi tiết vào mẫu người cha. router của tôi được thiết lập một cái gì đó như thế này:

App.Router.map(function() { 
... 
    this.resource('people', { path: '/people'}, function() { 
     this.resource('person', { path: '/:person_id' }, 
      function() { 
       this.route('details'); 
      } 
     ); 
    }); 

}); 

Với các tuyến đường cá nhân:

App.PeopleRoute = Ember.Route.extend({ 
    model: function() { 
     return App.People.find(); 
    }, 
    setupController: function(controller, model) { 
     controller.set('content', model); 
    } 
}); 

App.PersonRoute = Ember.Route.extend({ 
    model: function(params) { 
     return App.People.peepsById[params.person_id]; 
    }, 

    setupController: function(controller, model) { 
     this._super(controller, model); 
     var person = model; 
// this block ensures that only one person has a selected status at a time 
// ignore the overly-verbose code. I'm cleaning it up tomorrow 
     var ls = App.People.lastSelected; 
     if (ls) { 
      ls.set('selected', false); 
     } 
     person.set('selected', true); 
     App.People.lastSelected = person; 
     controller.set('content', model); 
    }, 

    renderTemplate: function() { 
     // person is actually stored in router 'context' rather than 'model' 
     // omg! 
     var x = this.controllerFor('personDetails').set('content', this.get('context')); 
     this.render('person/details', { // render person/details 
      into:'people', // into the people template 
      outlet: "veryPersonalDetails", // at the veryPersonalDetails outlet 
      controller: x // using the personDetails controller for rendering 
     }); 

// additional rendering in sidebar outlet for testing 
     this.render('person/details',{ 
      into:'people', 
      outlet: "personDetails", 
      controller: x 
     }); 

     console.log("@@@ we did it!"); 
    } 
}); 

tôi ban đầu đã cố gắng để có lối thoát trong PersonView, nhưng điều này sẽ không làm việc, như người mẫu của tôi đã thực sự được hiển thị trong tuyến đường con người. Khi ứng dụng đến được tuyến đường của người, bộ điều khiển đã hiển thị tất cả những người trong danh sách. Cá nhân tôi muốn nhắm mục tiêu đã được thông qua từ lâu.

Bằng cách có hành vi làm trung gian giữa mẫu phụ huynh và mẫu con mong muốn, tôi có thể thực hiện điều này.

Cuối cùng, liên quan đến câu hỏi liệu có khai báo rõ ràng các khung nhìn lồng nhau trong các mẫu hay chỉ sử dụng các cửa hàng, tôi tin rằng các cửa hàng sẽ sạch hơn rất nhiều. Trong khi giải pháp này liên quan đến một chút làm việc xung quanh các tuyến đường, nó là thích hợp hơn để có các đối tượng mẫu quá phức tạp. Bây giờ tôi hy vọng có thể đạt được các tổ mẫu phức tạp tùy ý mà không cần chạm vào bất kỳ thứ gì ngoài các tuyến đường liên quan đến kết xuất của chúng.

Hơn nữa, giải pháp này giúp loại bỏ chi phí của các cửa hàng không sử dụng. Tôi tin rằng bạn chỉ nên có các cửa hàng bạn dự định sử dụng, thay vì xả rác 'dom' bằng một loạt các vật chứa rỗng.