收集和使用Ember.TextField中的值

时间:2012-03-14 14:07:20

标签: javascript model-view-controller ember.js

我正在使用Ember.js编写一个小样本应用程序。我的目标是确定Ember的用例。我的应用是一个简单的Twitter Feed查看器。我单击一个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>

1 个答案:

答案 0 :(得分: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上的事件更改并保持绑定属性更新。