Question

我无法弄清楚如何在RC1下正确填充和接受来自Ember表单的更新。我把它归结为最基本的in this jsfiddle。我已经做得足够远，可以显示特定实体（具有名字和姓氏的用户）的表单，并在字段中填充当前值。但是，当用户键入时，每个按键实际更新字段，单击后退按钮显示数据已更改，而不单击更新按钮。我希望在更新之间保留一些逻辑，并且只在用户单击更新按钮后确认更新。

{{#view App.PersonFormView}}
  First name: {{view Ember.TextField valueBinding="firstName"}}
  Last name: {{view Ember.TextField valueBinding="lastName"}}
  <button {{action "updatePerson"}}>Update</button>
{{/view}}

在表单模板中，我试图关注其中一个Ember.js示例，但这样做会导致长时间延迟和使用RC1的怪异弃用警告。我认为这些例子仍在更新中。如果它存在的话，我更喜欢使用更多的把手 - 优雅的编码方式。

第二个问题是我无法在表单视图或控制器上捕获提交事件本身。我不知道这个事件的发展方向。

App.PersonFormController = Ember.ObjectController.extend({
  updatePerson: function(params){
    // this doesn't get triggered as I would have expected
    console.log('controller updatePerson: '+params);
  }
});
App.PersonFormView = Ember.View.extend({
  tagName: 'form',
  updatePerson: function(params){
    // this doesn't get triggered either!
    console.log('updatePerson params: '+params);
  }
});

总之，我需要：

使用值填充输入字段，而无需在用户键入时将其直接链接回模型数据
抓住提交按钮（或其他控件没问题）点击事件以及字段 - 和实体的ID - 以便我可以手动将它们设置回模型的数据

Answer 1

有几件事：

我无法捕获提交事件本身

事件在控制器和路径中触发，而不是视图。控制器PersonFormController没有捕获事件的原因是因为名称错误。控制器应以路线命名：EditPersonController。

将模型与动作一起传递通常很好：

<button {{action "updatePerson" content}}>Update</button>

以下是捕获事件的更新版本：http://jsfiddle.net/teddyzeenny/L9HMm/5/

使用值填充输入字段，而不将它们直接链接回模型的数据

将字段直接绑定到模型通常是一种很好的做法，以避免代码重复。

你的问题不是字段直接绑定到模型上，而是你无法控制发生的事情（保存，未保存，离开路线......）

要拥有可靠的控制权，最好将更新逻辑放在路线中。这样，当用户进入/离开路线时，您可以采取相应的行动。

捕捉路线中的事件：

App.EditPersonRoute = Ember.Route.extend({
    events: {
        updatePerson: function(record) {
          record.one('didUpdate', this, function() {
            this.transitionTo('index');
          });
          record.get('transaction').commit();
        }
    }
});

要在用户未点击Update时回滚更改，请在路线中使用deactivate回调：

App.EditPersonRoute = Ember.Route.extend({
    deactivate: function() {
      this.modelFor('editPerson').get('transaction').rollback();
    },
    events: {
        updatePerson: function(record) {
          record.one('didUpdate', this, function() {
            this.transitionTo('index');
          });
          record.get('transaction').commit();
        }
    }
});

现在，由于您没有使用余烬数据模型，因此这些不适用于小提琴。

生成表单和处理使用Ember.js rc1正确提交

1 个答案: