1

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

我有一些可行的方法，但我觉得这不是连接具有文本输入和需要访问该文本的按钮的视图的正确方法。

这是基本视图

{{#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('username') 但此外我无法清除文本框值（即使它如上所示）。

我正在寻找构建这个要点的现代版本（以前版本的 ember）https://gist.github.com/1477225

4

4 回答 4

2

我在这里看到三个问题（也许还有更多）。首先，username 不会是 中的字段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。

于 2012-09-05T14:07:31.740 回答
1

即使使用 Gidrius 的代码，您也可以立即进行验证然后传递数据。您唯一需要做的就是在提交处理方法中编写验证代码。或者，因为我们无论如何都在谈论客户端验证，您可以在字段值更改或模糊时进行，这将给用户几乎即时的反馈，了解他正在做什么。

于 2013-02-01T16:41:42.533 回答
0

我仍然无法让 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', '');
    }
  }    
});
于 2012-09-06T01:22:06.303 回答
0

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

通常表单字段值将绑定到控制器或模型，因此您只需要在控制器中拥有一个提交函数，这样每当调用函数时，您都可以通过绑定访问字段。

假设您使用的是最新的 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
  }
});
于 2013-02-01T13:51:09.233 回答