Question

我正在使用最新的1.0版本的ember.js，并希望不再使用已弃用的按钮来处理简单的表单。

我有一些有用的东西，但我觉得这不是正确的方法来连接一个既有文字输入又需要访问该文字的按钮的视图。

这是基本视图

{{#view PersonApp.AddPersonView}}
       {{view Ember.TextField valueBinding="username"}}
         {{#with this as username}}
           <input type="submit" value="add" {{action addPerson username}}/>
         {{/with}}
{{/view}}

这是视图

PersonApp.AddPersonView = Ember.View.extend({
  username: null,                                                                                
  addPerson: function(event) {
    var username = event.context.username;
    if (username) {
      PersonApp.personController.addPerson(username);
      this.set('username', ''); //this does not currently work
    }
  }
});

我唯一遇到的另一个问题是我无法以通常的方式访问用户名。即 - this.get（＆＃39;用户名＆＃39;）但另外我无法清除文本框值（即使它已在上面显示）。

我希望建立这个要点的现代版本（以前版本的余烬）https://gist.github.com/1477225

Answer 1

我在这里看到三个问题（也许还有更多）。首先，用户名不是event.context中的字段，但实际上是事件上下文。其次，我认为您需要在view.username中指定valueBinding，否则控制器是该属性的默认主页（我相信）。然后，要将其设置为初始状态，您需要将其设置为null。第三，您的操作目标将是路由器，因此您需要将视图指定为目标。

这应该有效：

{{#view PersonApp.AddPersonView}}
   {{view Ember.TextField valueBinding="view.username"}}
     {{#with this as username}}
       <input type="submit" value="add" {{action addPerson username target="this"}}/>
     {{/with}}
{{/view}}

PersonApp.AddPersonView = Ember.View.extend({
  username:  null                                                                               
  addPerson: function(event) {
    var username = event.context;
    if (username) {
       this.get('controller').addPerson(username);
       this.set('username', null); 
    }
 }

}）;

此外，创建新人的更好方法是创建一个空白人模型，绑定控制器并查看该模型，然后保存记录，然后将绑定设置回null。

Answer 2

即使使用Gidrius的代码，您也可以立即进行验证然后传递数据。您需要做的唯一事情是在提交处理方法中编写验证代码。或者，因为无论如何我们都在谈论客户端验证，你可以在字段值更改或模糊时执行此操作，这将为用户提供几乎即时的反馈信息。

Answer 3

我仍然无法得到类似this.get（'username'）的东西，但我最终得到了以下内容

{{#view PersonApp.AddPersonForm}}
       {{view Ember.TextField valueBinding="username"}}
       <input type="submit" value="add" {{action addPerson this}}/>
{{/view}}

PersonApp.AddPersonForm = Ember.View.extend({
  addPerson: function(event) {
    var username = event.context.username;
    if (username) {
      PersonApp.personController.addPerson(username);
      event.context.set('username', '');
    }
  }    
});

Answer 4

可能有点太晚了，但可能对其他人有帮助。

通常表单字段值将绑定到控制器或模型，因此您需要的只是控制器中的提交函数，因此无论何时调用函数，您都可以通过绑定访问字段。

假设您使用的是最新的pre.4 ember

，这就是它的外观

<强>更新

// DOM part
<form {{action submitForm on="submit"}}>
    {{view Ember.TextField valueBinding="username"}}
    <button type="submit">add</button>
</form>

这是一个控制器

PersonApp.PersonController = Ember.ArrayController({
  username: '',
  submitForm: function() {
    var u = this.get('username'); // saving value to variable
    this.set('username',''); // sets username to ''
    console.log(u); // will output saved username
  }
});

如何使用ember.js构建一个可以访问文本输入值的表单

4 个答案: