Ember.TextFieldの値の収集と使用

Question

Ember.jsを使用して小さなサンプルアプリケーションを作成しています。私の目標は、Emberのユースケースを判断することです。私のアプリはシンプルなTwitterフィードビューアです。 Ember.Buttonオブジェクトをクリックすると、Twitterフィードが読み込まれ、ページにダンプされます。すべてうまくいくが、ユーザー名はハードコードされている。もっと深く掘り下げたいので、Twitterのユーザー名を示すEmber.TextFieldビューを追加しました。

ボタンがツイートを表示する箇条書きリストをどのようにターゲットにしているかを確認し、データを取得するコントローラをどのように知っているかもわかります。私の質問は、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); 
     }) 
    } 
}); 

その後、

とあなたのTextFieldにバインド：

<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のイベントを変更し、バインドされたプロパティを更新したままにします。