如何在使用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提交時使用文本輸入值訪問表單

回答

相關問題