ember.js - mẫu điều khiển/chế độ xem chính xác để tạo mô hình mới

Question

Tôi có một ứng dụng mà tại thời điểm này có chứa chế độ xem các đối tượng của cùng một mô hình. Chúng được lấy từ máy chủ, looped qua và thêm vào bộ điều khiển danh sách sử dụng một phương pháp add

<script> 
App.Controllers.List = Em.ArrayProxy.create({ 
    content: Ember.A([]), 
    add: function(obj){ 
    this.pushObject(obj); 
    } 
}); 
</script> 

bây giờ tôi đang làm việc trên một phần mà người dùng tạo ra một đối tượng mới đó (sau khi đi qua xác nhận) sẽ được thêm vào danh sách và cũng được gửi đến máy chủ.

Tôi không thể tìm thấy bất kỳ ví dụ nào về cách tốt nhất để theo dõi để tạo đối tượng mới thông qua biểu mẫu nhập. Tôi có thể thấy một vài lựa chọn, và đã được bán một vài nhưng không có gì cảm thấy đúng.

• Tạo một cái nhìn với các yếu tố hình thức thích hợp và một phương pháp cho instantiating mô hình sử dụng thuộc tính khác nhau lấy từ các yếu tố hình thức sử dụng .get()
• Tạo một mô hình trong nội dung và hình thức ràng buộc của quan điểm các yếu tố đó. Bao gồm một phương pháp trên xem cho thêm vào mảng điều khiển/tiết kiệm đến máy chủ
• Tạo một mô hình, thêm nó vào mảng điều khiển và mở nó để chỉnh sửa

tôi loại có thể chống lại các chức năng tôi muốn, nhưng tôi muốn đảm bảo rằng tôi biết thực hành tốt nhất.

Tôi hiện đang có một cái gì đó như thế này (đó là viên đạn thứ hai trong danh sách của tôi)

<script> 
App.Views.ItemCreate = Em.View.extend({ 
    content: App.Models.Item.create({}), 
    templateName: 'create', 
    createButton: function(){ 

    var itemObj = this.get('content'); 
    var item = {}; 
    item.title = this.get('content').get('title'); 

    $.ajax({ 
     type: 'POST', 
     url: '/test/data.json', 
     data: item, 
     dataType: 'json', 
     success: function(responseData, textStatus, jqXHR) { 
     App.Controllers.List.add(itemObj); 
     } 
    }); 
    } 
}); 
</script> 

<script type="text/x-handlebars" data-template-name="create"> 
    {{view Em.TextField id="create-title" valueBinding="content.title"}} 
    <a href="#" {{action "createButton" }}>Create</a> 
</script> 

Bất kỳ sự giúp đỡ rất nhiều đánh giá cao

GHI CHÚ

Tôi đã thay đổi câu trả lời đúng để pangratz. Mặc dù các câu trả lời khác trả lời trực tiếp câu hỏi của tôi, tôi tin rằng những người tìm thấy thông tin này qua Google nên tham khảo câu trả lời mà Pangratz cung cấp không chỉ là MVC tốt mà còn hơn Ember-y: o)

Answer 1

Giao tiếp với máy chủ chắc chắn là một điều không nên thực hiện trong giao diện. Đây là điều mà một bộ điều khiển dành cho. Để tách biệt các phần khác nhau của ứng dụng, tôi thậm chí sẽ xem xét việc triển khai DataSource xử lý các yêu cầu AJAX. Sự phân chia này làm cho ứng dụng của bạn dễ kiểm tra hơn và mỗi thành phần có thể sử dụng lại được. Các kết nối cụ thể của khung nhìn, bộ điều khiển và nguồn dữ liệu sau đó được thực hiện thông qua các ràng buộc.

Các quy trình làm việc đối với trường hợp của bạn có thể như sau:

• Quan điểm cho thấy hình thức chỉnh sửa của bạn, mà' giá trị này được ràng buộc với một bộ điều khiển
• Quan điểm xử lý một lưu hành động mà nói với bộ điều khiển để tiết kiệm các đối tượng được tạo
• các đại biểu điều khiển tiết kiệm để DataSource mà sau đó cuối cùng đã bắt đầu yêu cầu AJAX
• Bộ điều khiển được thông báo khi đối tượng đã được lưu

Bạn cũng nên xem ember-data là bộ nhớ lưu trữ dữ liệu phía khách hàng và xử lý tất cả các bản mẫu cho bạn. Cũng có một cái nhìn tại The architecture of Ember.js apps - data và EmberJS: Good separation of concerns for Models, Stores, Controllers, Views in a rather complex application?

---

Xem:

App.View.ItemCreate = Ember.View.extend({ 
    templateName: 'create', 
    createObject: function(evt) { 
    var object = this.get('content'); 
    var controller = this.get('controller'); 
    controller.createObject(object); 
    } 
}); 

Bộ điều khiển:

App.Controllers.List = Ember.ArrayProxy.extend({ 
    content: [], 
    createObject: function(hash) { 
    var dataSource = this.get('dataSource'); 
    dataSource.createObject(hash, this, this.createdObject); 
    }, 
    createdObject: function(object) { 
    this.pushObject(object); 
    } 
}); 

DataSource:

App.DataSource = Ember.Object.extend({ 
    createObject: function(hash, target, callback) { 
    Ember.$.ajax({ 
     success: function(data) { 
     callback.apply(target, data); 
     } 
    }); 
    } 
}); 

Keo tất cả mọi thứ lại với nhau :

App.dataSource = App.DataSource.create(); 
App.listController = App.Controllers.List.create({ 
    dataSourceBinding: 'App.dataSource' 
}); 

App.View.ItemCreate.create({ 
    controllerBinding: 'App.listController' 
}).append(); 

Answer 2

Nếu bạn muốn theo một mô hình MVC nghiêm ngặt thì mô hình sẽ không bao giờ được tạo trên khung nhìn nhưng trên bộ điều khiển. Ember vẫn còn rất trẻ và vẫn chưa có bất kỳ mẫu xác định nào, điều tôi sẽ làm là đặt mô hình của bạn làm nội dung của khung nhìn (như bạn đã làm) với tất cả các đầu vào liên kết với các thuộc tính mô hình khác nhau. Sau đó, khi nút được đẩy:

createButton: function(){ 
    App.Controllers.List.create(this.get('content')); 
} 

Trên bộ điều khiển:

create: function(model) { 
    if model.valid() { //validates the model 
    model.save({ 
     onSuccess: function(response) { // callback 
     var item = App.Models.Item.create(response.item) 
     App.controllers.List.add(item) 
     } 
    }) 
    } 

Và cuối cùng là mô hình:

save: function(options) { 
    $.ajax({ 
    type: 'POST', 
    url: '/test/data.json', 
    data: item, 
    dataType: 'json', 
    success: options.onsuccess 
    }); 
} 

Đây là cách js khác khuôn khổ mong đợi bạn làm việc. Nó cảm thấy hơi chi tiết và phức tạp hơn, nhưng nó giữ mọi thứ tại chỗ