2

我无法弄清楚如何正确填充和接受来自 RC1 下的 Ember 表单的更新。我把它归结为这个 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 - 以便我可以手动将它们设置回模型的数据
4

1 回答 1

7

有几件事：

我无法捕获提交事件本身

事件在控制器和路由中触发，而不是在视图中触发。您的控制器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-data 模型。

于 2013-02-28T10:44:01.343 回答