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

我无法弄清楚如何在RC1下正确填充并接受来自Ember表单的更新。我已经将它简化为基本要素in this jsfiddle。我已经足够为显示特定实体（具有名字和姓氏的用户）的表单并且当前值填充在字段中。但是，随着用户键入，字段实际上会随每次按键更新，并且单击后退按钮会显示数据已更改，而无需单击更新按钮。我宁愿在更新之间保留一些逻辑，只在用户单击更新按钮后才确认更新。生成表单并处理用Ember.js正确提交rc1

{{#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 - 以便我可以将它们重新设置为模型的数据

来源

2013-02-28 Alice Young

There is sever人的事情：

我无法捕捉提交事件本身

活动的控制器和路线，不认为被解雇。你的控制器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(); 
     } 
    } 
});

现在，这些赢得了因为您没有使用余烬数据模型，所以不会在小提琴中工作。

来源

2013-02-28 10:44:01

非常好的指导，谢谢。我不想触摸余烬数据 - 如果它稳定下来，也许在几个月内。 RC1的ember API变化已经足够震撼了。我确实找到了将属性复制到另一个位置的方法，以便在取消的情况下可以恢复它们，所以我认为现在可以工作。 – 2013-02-28 17:10:30

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

回答

相关问题