Javascript 从Ember.TextField收集和使用值
我正在使用Ember.js编写一个小示例应用程序。我的目标是确定Ember的用例。我的应用程序是一个简单的Twitter提要查看器。我单击一个Ember.Button对象,该对象加载我的Twitter提要并将其转储到页面。这一切都很好,但用户名是硬编码的。我想深入挖掘,所以我添加了一个Ember.TextField视图,我想用它来表示Twitter用户名 我看到按钮是如何指向显示推文的项目符号列表的,我还看到它如何知道使用哪个控制器来获取数据。我的问题是如何告诉Ember从输入字段中提取用户名值并将其传递到调用tweets的方法中?我正在添加现有的JS代码:Javascript 从Ember.TextField收集和使用值,javascript,model-view-controller,ember.js,Javascript,Model View Controller,Ember.js,我正在使用Ember.js编写一个小示例应用程序。我的目标是确定Ember的用例。我的应用程序是一个简单的Twitter提要查看器。我单击一个Ember.Button对象,该对象加载我的Twitter提要并将其转储到页面。这一切都很好,但用户名是硬编码的。我想深入挖掘,所以我添加了一个Ember.TextField视图,我想用它来表示Twitter用户名 我看到按钮是如何指向显示推文的项目符号列表的,我还看到它如何知道使用哪个控制器来获取数据。我的问题是如何告诉Ember从输入字段中提取用户名值
// 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>
{{view Ember.TextField placeholder=“Twitter用户名”}
{{{#查看Ember.Button target=“Tweets.tweetsArray”action=“loadTweets”}
加载推文
{{/view}
{{{#每个Tweets.tweetsArray}
-
{{user.screen{u name}
{{text}}
{{/每个}}
您需要在余烬对象上设置用户名,如您的应用程序:
// 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>
{{view Ember.TextField valueBinding=“Tweets.username”placeholder=“Twitter username”}
{{{#查看Ember.Button target=“Tweets.tweetsArray”action=“loadTweets”}
加载推文
{{/view}
{{{#每个Tweets.tweetsArray}
-
{{user.screen{u name}
{{text}}
{{/每个}}
Ember在TextField上监视更改事件,并将保持绑定属性的更新。这比我想象的要容易。那么,通过在应用程序中添加用户名,这是否会使其成为一个全局变量?或者这个概念在余烬中真的没有一席之地?另一个问题。在JS文件中,您说Tweets.get('username'),但在视图中,您说Tweets.username。是否有一个关于其中一个或另一个的规则,或者它们是可互换的?在实际的应用程序中,我可能会创建一个控制器对象来包含此变量,但我希望尽可能简单。此外,Tweets.username将由Handlebar解释为Tweets.get(“username”)。非常感谢Dan。到目前为止,我真的很喜欢余烬。