如何在使用ember.js提交时使用文本输入值访问表单

我使用的是ember.js的最新版本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（'用户名'），但除此之外，我无法清除文本框的值（即使它显示在上面）。

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

来源

2012-09-05 Toran Billups

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

这应该工作：

{{#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); 
    } 
}

}）;

此外，创建新人的更好方法是创建一个空白人模型，将控制器和视图绑定到该模型，然后保存记录，之后将绑定设置为空。

来源

2012-09-05 14:07:31 buuda

这是一个裸露的骨骼问候世界，所以我不会在这种情况下有一个路由器或余烬数据 –

我仍然无法得到的东西像this.get（“用户名”）的工作，但我结束了以下

{{#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-06 01:22:06

可能有点为时已晚，但可能会有所帮助别人。

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

下面是这一切是如何可能看起来像，你正在使用最新的pre.4烬

更新

// 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-01 13:51:09 Giedrius

优秀的例子 - 感谢您的回复迟！我仍然不知道逻辑本身应该在哪里生存，但我更喜欢你的HTML到我最初做的。我觉得像ember缺少一个表单层/类/组件，将被绑定到每个视图（所以在这个例子中，我可以验证表单，然后将它从表单传递给控制器，如果它是好的）。有些人会说控制者是这个地方的合适人选，但我更愿意将自己的责任生活在另一个对象中。 –

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

来源

2013-02-01 16:41:42

如何在使用ember.js提交时使用文本输入值访问表单

回答

相关问题