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

Question

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

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

我现在正在开发一个用户创建新对象的部分(通过验证后)将添加到列表中并发送到服务器.

我找不到关于通过输入表单创建新对象的最佳模式的任何示例.我可以看到一些选项,并且半实现了一些,但没有任何感觉是正确的.

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

我可以解决我想要的功能,但我更愿意确保我了解最佳实践.

我目前有这样的东西(这是我列表中的第二个子弹)

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

任何帮助非常感谢

笔记

我已经改变了pangratz的正确答案.虽然其他回复直接回答了我的问题,但我相信那些通过Google找到这个问题的人应该参考Pangratz提供的答案,因为它不仅是好的MVC,而且更像是Ember-y:o)

Answer 1

与服务器通信绝对不应该在视图中完成.这是控制器的用途.为了进一步分离应用程序的不同部分,我甚至会考虑实现一个DataSource处理AJAX请求的方法.这种拆分使您的应用程序更易于测试,并且每个组件都可以重用.然后通过绑定实现视图,控制器和数据源的具体连接.

您的案例的工作流程可能如下:

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

您还应该查看作为客户端数据存储的ember-data,并为您处理所有样板文件.还可以看一下Ember.js应用程序的架构 - 数据和EmberJS:在相当复杂的应用程序中对模型,商店,控制器,视图的关注点进行了良好的分离？

视图:

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

控制器:

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