Javascript ember.js-创建新模型的正确控制器/视图模式是什么

我有一个应用程序，目前包含同一模型的对象视图。它们从服务器检索，循环通过并使用add方法添加到列表控制器

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

App.Controllers.List=Em.ArrayProxy.create({
内容：余烬A（[]），
添加：功能（obj）{
本发明公开了一种推送对象（obj）；
}
});

我现在正在处理一个部分，其中用户创建一个新对象（通过验证后）将添加到列表中，并发送到服务器

我找不到任何关于通过输入表单创建新对象的最佳模式的例子。我可以看到一些选项，并且已经半实现了一些，但没有什么感觉是对的

• 创建一个具有适当表单元素的视图，以及一个使用.get（）从表单元素检索的各种属性实例化模型的方法
• 在视图的内容中创建模型，并将表单元素绑定到该模型。在视图中包含用于添加到控制器阵列/保存到服务器的方法
• 创建一个模型，将其添加到控制器阵列中并打开以进行编辑

我可以尝试我想要的功能，但我更愿意确保我了解最佳实践

我现在有类似的东西（这是我清单上的第二个项目）

App.Views.ItemCreate=Em.View.extend({
内容：App.Models.Item.create（{}），
templateName:“创建”，
createButton:function（）{
var itemObj=this.get（'content'）；
var item={}；
item.title=this.get（'content'）.get（'title'）；
$.ajax({
键入：“POST”，
url:“/test/data.json”，
数据：项目：，
数据类型：“json”，
成功：函数（responseData、textStatus、jqXHR）{
App.Controllers.List.add（itemObj）；
}
});
}
});
{{view Em.TextField id=“create title”valueBinding=“content.title”}

非常感谢您的帮助

注释

---

我把正确答案改成了pangratz的。尽管其他回答直接回答了我的问题，但我相信那些通过谷歌找到答案的人应该参考Pangratz提供的答案，因为它不仅是好的MVC，而且更重要的是，它是Ember-y:o）

如果你想遵循严格的MVC模型，那么该模型永远不应该在视图上创建，而应该在控制器上创建。Ember还很年轻，还没有任何定义的模式，我要做的是将您的模型设置为视图的内容（正如您已经做的），所有输入绑定到不同的模型属性。然后按下按钮时：

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

在控制器上：

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)
      }
    })
  }

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);
  }
});

最后是模型：

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

---

这是其他js框架期望您的工作方式。它让人感觉有点冗长和复杂，但它让事情保持在原位

与服务器通信肯定是视图中不应该做的事情。这是控制器的作用。为了进一步分离应用程序的不同部分，我甚至会考虑执行一个<代码>数据源< /代码>，它处理Ajax请求。这种划分使应用程序更易于测试，每个组件都可以重用。然后通过绑定实现视图、控制器和数据源的具体连接

您的案例的工作流程可以如下所示：

• 该视图显示编辑表单，其中的值绑定到控制器
• 视图处理一个保存操作，该操作告诉控制器保存创建的对象
• 控制器将保存委托给数据源，然后数据源最终启动AJAX请求
• 保存对象时会通知控制器

您还应该查看哪个是客户端数据存储，并为您处理所有样板文件。也看看和

---

视图：

控制器：

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)
      }
    })
  }

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);
  }
});

数据源：

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

把所有东西粘在一起：

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

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

---

谢谢你的回复。在您回答之前，我向控制器数组添加了一个对象，并在实例化它的同时调用了它的editMode。在我的情况下，它是有效的，因为所有的东西通常都会被编辑到位。我没有把它写得那么好（我的ajax帖子也在视图中！），所以我会更接近你的版本。非常清楚，谢谢。谢谢。我注意到，在实现数据源时，我开始稍微重写余烬数据，我已经在稍微不同的上下文中使用了它，并且有一些未扩展的行为，我想我会再试一次！另外，请注意，对于遇到此问题的其他人：在数据源createObject函数中，如果使用apply，则应该是callback.apply（target，[data]）或callback.call（target，data），您可能会使用传递到ajax函数中的self/\u this/而不是返回的原始数据