收集和使用Ember.TextField的值

Question

我正在使用Ember.js編寫一個小示例應用程序。我的目標是確定Ember的用例。我的應用是一個簡單的Twitter提要查看器。我點擊一個Ember.Button對象，加載我的Twitter提要並將其轉儲到頁面。這一切都很好，但用戶名是硬編碼的。我想深入挖掘，因此我添加了一個Ember.TextField視圖，我想用它來指示Twitter用戶名。

我看到按鈕是如何定位顯示推文的項目符號列表的，並且我也看到它是如何知道使用哪個控制器來獲取數據的。我的問題是如何告訴Ember從輸入字段中提取用戶名值，並將其傳遞到調用推文的方法中？我加入現有的JS代碼：

// app.js 
var Tweets = Em.Application.create(); 

Tweets.tweetsArray = Em.ArrayController.create({ 
    content: [], 
    loadTweets: function() { 
     var url = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=commadelimited&callback=?'; 
     $.getJSON(url,function(data){ 
      Tweets.tweetsArray.pushObjects(data); 
     }) 
    } 
}); 

而這裏的觀點：

<script type="text/x-handlebars"> 
    <div id="frm"> 
     {{view Ember.TextField placeholder="Twitter username"}} 
     {{#view Ember.Button target="Tweets.tweetsArray" action="loadTweets"}} 
      Load Tweets 
     {{/view}} 
    </div> 
    <ul id="tweets"> 
     {{#each Tweets.tweetsArray}} 
      <li> 
       <h3>{{user.screen_name}}</h3> 
       <p>{{text}}</p> 
      </li> 
     {{/each}} 
    </ul> 
</script> 

Answer 1

你要設置的用戶名上Ember.Object，喜歡你的應用程序：

// app.js 
var Tweets = Em.Application.create({username: ""}); 

Tweets.tweetsArray = Em.ArrayController.create({ 
    content: [], 
    loadTweets: function() { 
     var url = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + Tweets.get("username") + '&callback=?'; 
     $.getJSON(url,function(data){ 
      Tweets.tweetsArray.pushObjects(data); 
     }) 
    } 
}); 

，然後將其綁定到文本字段：

<script type="text/x-handlebars"> 
    <div id="frm"> 
     {{view Ember.TextField valueBinding="Tweets.username" placeholder="Twitter username"}} 
     {{#view Ember.Button target="Tweets.tweetsArray" action="loadTweets"}} 
      Load Tweets 
     {{/view}} 
    </div> 
    <ul id="tweets"> 
     {{#each Tweets.tweetsArray}} 
      <li> 
       <h3>{{user.screen_name}}</h3> 
       <p>{{text}}</p> 
      </li> 
     {{/each}} 
    </ul> 
</script> 

Ember監視器更改TextField上的事件並將保持綁定屬性更新。