Сбор и использование значения из Ember.TextField - PullRequest
Новая
       0

Сбор и использование значения из Ember.TextField

2 голосов
/ 14 марта 2012

Я пишу небольшой пример приложения, используя Ember.js. Моя цель - определить варианты использования Ember. Мое приложение представляет собой простой просмотрщик твиттера. Я щелкаю объект 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 Ответ

1 голос
/ 14 марта 2012

Вы захотите установить имя пользователя для 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 и будет обновлять связанное свойство.

...