如何延迟 Ember 视图从绑定输入字段同步更新



假设我有一组可编辑的用户,当一个人去编辑该用户时,Ember将在您键入绑定输入文本字段时同步更新所有视图。

这很酷,但从用户体验的角度来看,它可能具有误导性......这些值在服务器上根本没有改变。我想做的是推迟视图更新,直到我根据来自服务器的成功消息在相应的操作方法中设置它。

我发现当我使用 {{bind-attr value=firstName}} 而不是 {{input value=firstName}} 时,余烬确实不再更新更改输入字段的视图,但是无法再通过 this.get('firstName') 在操作提交方法中访问新键入的值?

例子.hbs

<script type="text/x-handlebars" id="user">
<h3>Edit {{fullName}}</h3>
<p>
<label>First Name</label>
{{input value=firstName}}
</p>
<p>
<label>Last Name</label>
<input {{bind-attr value=lastName}} />
</p>
<p>
<button {{action 'submit'}}>Submit</button>
</p>
</script>

示例控制器

App.UserController = Ember.ObjectController.extend({
  actions: {
    submit: function(){
      // call to server, on confirmation set 'Globally' first and last names 
      console.log(this.get('firstName') + " - " + this.get('lastName'));
    }
  }
});

这是我的 jsbin:http://jsbin.com/jipik/2/edit?html,js,console,output

您所需要的只是一组辅助变量。 将一个名为 firstNameEdited 的变量添加到控制器中,并将其值最初设置为 firstName 。 值将您的输入字段绑定到此新值,并将此新值提交到 api 调用。 成功返回 API 调用后,使用 firstNameEdited 的值更新firstName

最新更新