Ember.js - kịch bản CRUD - Xác định Xem từ bên trong một Route

Question

Tôi đã hỏi một câu hỏi trước đây mà tôi muốn bind a collection residing in the controller to the list scenario view, tuy nhiên, tôi đã thêm chi tiết và chỉnh sửa mẫu và quan điểm cấu trúc của tôi sản xuất một vài thêm tiểu đường:

root.contacts.details -> /contacts/:contact_id
root.contacts.edit -> /contacts/:contact_id/edit

trong details kịch bản của tôi đầu tiên tôi bắt đầu gọi connectOutlets như sau

[...] 
connectOutlets: function (router, contact) { 
    router.get('contactController').set('contact', contact); 
    router.get('applicationController').connectOutlet('contacts'); 
},[...] 

Điều này sẽ thay đổi tuyến đường trong thanh điều hướng trình duyệt, nhưng nó sẽ tải quan điểm tương tự, sau đó tôi đã thay đổi .connectOutlet để xúc thay vì danh bạ như sau

[...] 
connectOutlets: function (router, contact) { 
    router.get('contactController').set('contact', contact); 
    router.get('applicationController').connectOutlet('contact'); 
},[...] 

Bởi vì điều này, tôi đã phải tạo một bộ điều khiển mới vì Ember không thể tìm thấy một bộ điều khiển có tên contactController, vì vậy tôi đã kết thúc với contactController và contactsController và tôi nghĩ rằng tôi đang phá vỡ mô hình MVC. cũng như tạo một lớp bổ sung để duy trì, các vấn đề có thể xảy ra với việc đồng bộ hóa (khi chỉnh sửa liên hệ tôi phải đồng bộ hóa thủ công với bộ sưu tập trong contactsController). Ngoài ra khi tôi điều hướng đến /#/contacts/2/edit, nó sẽ tải chế độ xem chi tiết vì tôi đang sử dụng cùng một tên trong .connectOutlet('contact'). Vì vậy, những gì tôi đang làm không thể đúng. Tôi không muốn tạo điều khiển cho mỗi kịch bản. Tôi chắc chắn đây không phải là cách nó được thực hiện.

Tôi cũng đã cố gắng thiết lập các quan điểm (trong trường hợp của tôi App.EditContactView) thay cho tên tài nguyên trong connectOutlets nhưng tôi đã nhận ra lỗi nói rằng tôi có thể vượt qua "một tên hoặc một viewClass nhưng không phải cả hai" nhưng tôi đã không đi qua thông qua viewClass và thay vì làm đối số của connectOutlet.

Tôi cũng đã cố gắng đặt chế độ xem hoặc bản sao của chế độ xem thành chính tuyến đường và tôi có thể phá vỡ JavaScript của mình hoặc trong một số trường hợp tôi gặp lỗi "App.EditContactView không có phương thức CharAt ".

Sau đó, một lần nữa, tôi bị mất một chút. Tôi đã thấy các câu hỏi khác tại SO và những nơi khác mà tôi đã tìm thấy hoặc sử dụng ember-routermanager bởi Gordon Hempton (có vẻ tốt, nhưng tôi chỉ quan tâm đến việc sử dụng tích hợp ngay bây giờ), Ember.StateManager hoặc không sử dụng trạng thái/tuyến đường chút nào. Tài liệu chưa giải thích quá nhiều về những điều này.

Câu hỏi: Cách tiếp cận lý tưởng để giải quyết tất cả các trường hợp CRUD với Ember.Router là gì? Tôi muốn contactsController của mình để có thể liệt kê tất cả, tìm một, chỉnh sửa, thêm một và xóa một liên hệ. Hiện tại, tôi có một số contactsController với findAll và một contactController với find, edit, remove, add do vấn đề đặt tên.

Tôi hiện không sử dụng dữ liệu ember vì vậy tôi sẽ quan tâm hơn đến các ví dụ không có tham chiếu đến dữ liệu ember (Tôi đang thực hiện các bước em bé mà không cần bất kỳ trình cắm thêm nào).

Dưới đây là phiên bản hiện tại của router của tôi:

JS

App.Router = Ember.Router.extend({ 
    enableLogging: true, 
    location: 'hash', 

    root: Ember.Route.extend({ 
     // EVENTS 
     gotoHome: Ember.Route.transitionTo('home'), 
     gotoContacts: Ember.Route.transitionTo('contacts.index'), 

     // STATES 
     home: Ember.Route.extend({ 
      route: '/', 
      connectOutlets: function (router, context) { 
       router.get('applicationController').connectOutlet('home'); 
      } 
     }), 
     contacts: Ember.Route.extend({ 
      route: '/contacts', 
      index: Ember.Route.extend({ 
       route: '/', 
       contactDetails: function (router, context) { 
        var contact = context.context; 
        router.transitionTo('details', contact); 
       }, 
       contactEdit: function (router, context) { 
        var contact = context.context; 
        router.transitionTo('edit', contact); 
       }, 
       connectOutlets: function (router, context) { 
        router.get('contactsController').findAll(); 
        router.get('applicationController').connectOutlet('contacts', router.get('contactsController').content); 
       } 
      }), 
      details: Ember.Route.extend({ 
       route: '/:contact_id', 
       view: App.ContactView, 
       connectOutlets: function (router, contact) { 
        router.get('contactController').set('contact', contact); 
        router.get('applicationController').connectOutlet('contact'); 
       }, 
       serialize: function (router, contact) { 
        return { "contact_id": contact.get('id') } 
       }, 
       deserialize: function (router, params) { 
        return router.get('contactController').find(params["contact_id"]); 
       } 
      }), 
      edit: Ember.Route.extend({ 
       route: '/:contact_id/edit', 
       viewClass: App.EditContactView, 
       connectOutlets: function (router, contact) { 
        router.get('contactController').set('contact', contact); 
        router.get('applicationController').connectOutlet('contact'); 
       }, 
       serialize: function (router, contact) { 
        return { "contact_id": contact.get('id') } 
       }, 
       deserialize: function (router, params) { 
        return router.get('contactController').find(params["contact_id"]); 
       } 
      }) 
     }) 
    }) 
}); 
App.initialize(); 

mẫu liên quan

<script type="text/x-handlebars" data-template-name="contact-details"> 
    {{#if controller.isLoaded}} 
     <img {{bindAttr src="contact.imageUrl" alt="contact.fullName" title="contact.fullName"}} width="210" height="240" /><br /> 
     <strong>{{contact.fullName}}</strong><br /> 
     <strong>{{contact.alias}}</strong> 
    {{else}} 
     <img src="images/l.gif" alt="" /> Loading... 
    {{/if}} 
</script> 

<script type="text/x-handlebars" data-template-name="contact-edit"> 
    <strong>Edit contact</strong><br /> 
    First Name: <input type="text" id="txtFirstName" {{bindAttr value="contact.firstName"}}<br /> 
    Lasst Name: <input type="text" id="txtLastName" {{bindAttr value="contact.lastName"}}<br /> 
    Email: <input type="text" id="txtEmail" {{bindAttr value="contact.email"}}<br /> 
</script> 

<script type="text/x-handlebars" data-template-name="contact-table-row"> 
    <tr> 
     <td> 
      <img {{bindAttr src="contact.imageUrl" alt="contact.fullName" title="contact.fullName"}} width="50" height="50" /><br />{{contact.fullName}} 
     </td> 
     <td> 
      Twitter: {{#if contact.twitter}}<a {{bindAttr href="contact.twitter"}} target='_blank'>Follow on Twitter</a>{{else}}-{{/if}}<br /> 
     </td> 
     <td> 
      <a href="#" {{action contactDetails context="contact"}}>Details</a> | 
      <a href="#" {{action contactEdit context="contact"}}>Edit</a> 
     </td> 
    </tr> 
</script> 

Note: Nếu có bất cứ điều gì không rõ ràng, hãy hỏi trong phần bình luận và tôi có thể e dit điều này với nhiều chi tiết

Chỉnh sửa: Tôi đã thêm dự án này vào GitHub thậm chí tho nó không ở đâu gần những gì tôi muốn vạch trần như một mẫu học tập. Mục đích là để tiến lên trên điều này và tạo ra một mẫu CRUD trong một tương lai gần. Hiện đang sử dụng MS Web API, nhưng có thể sớm thêm phiên bản Rails.

Answer 1

Có một vài điều đang diễn ra ở đây, tôi sẽ thử và trả lời chúng, nhưng nếu tôi bỏ lỡ bất cứ điều gì, vui lòng để lại nhận xét. Bạn dường như đang sáng tạo lại rất nhiều thứ Ember đã làm cho bạn.

Thứ nhất, nếu bạn muốn chuyển chế độ xem sang phương thức connectOutlet, bạn cần chuyển một băm làm đối số một và duy nhất.

router.get('applicationController').connectOutlet({ 
    viewClass: App.EditContactView, 
    controller: router.get('contactsController'), 
    context: context 
}) 

Thứ hai, có hai bộ điều khiển liên hệ không được tán thành, trên thực tế, tôi khuyên bạn nên sử dụng. Một số ít ContactController được thừa kế từ ObjectController và ContactsController được thừa kế từ ArrayController, điều này có nghĩa là bạn có thể dễ dàng tận dụng các proxy nội dung được xây dựng trong.

Thứ ba, nếu bạn thêm find và findAll phương pháp lớp để mô hình của bạn, bạn sẽ làm cho cuộc sống dễ dàng hơn nhiều cho chính mình.

• Bạn sẽ không cần phải xác định hàm serialize/phương pháp deserialize bạn đã xác định, theo mặc định Ember sẽ tìm kiếm một mô hình với tên rút ra từ các tuyến đường như vậy: contact_id sẽ tự động tìm kiếm App.Contact.find (: contact_id).

• Bạn cũng sẽ có thể thay đổi connectOutlets chỉ số của bạn để: router.get('applicationController').connectOutlet('contacts', App.Contact.findAll())

hơn Một mẹo, hiện chi tiết của bạn và chỉnh sửa các tuyến đường gần như hoàn toàn giống hệt nhau. Tôi sẽ tạo một tuyến đường được gọi là company và sau đó tạo chi tiết con và chỉnh sửa chế độ xem bên trong nó.