我正在使用 Ember.js 编写一个小型示例应用程序。我的目标是确定 Ember 的用例。我的应用程序是一个简单的 Twitter 提要查看器。我单击一个 Ember.Button 对象,该对象加载我的 Twitter 提要并将其转储到页面。这一切都很好,但用户名是硬编码的。我想深入挖掘,所以我添加了一个 Ember.TextField View ,我想用它来指示 Twitter 用户名。
我看到按钮如何定位显示推文的项目符号列表,我还看到它如何知道使用哪个 Controller 来获取数据。我的问题是如何告诉 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);
})
}
});
这是 View :
<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>
最佳答案
您需要在 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);
})
}
});
然后将其绑定(bind)到您的 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 上的更改事件并将保持绑定(bind)属性更新。
关于javascript - 从 Ember.TextField 中收集和使用值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9703529/