0

Twitter フィードを表示する Ember アプリケーションを作成していますが、埋め込みリソースを介して個々のツイートを表示するのに問題があります。

コードは次のとおりです。

テンプレート

    <script type="text/x-handlebars" data-template-name="tweets">
        <div id="stream">
            {{#each tweet in controller}}
                <div class="tweet">
                    <p class="tweet_text">{{tweet.text}}</p>
                    <p> {{#linkTo "tweet" tweet}} {{tweet.id}} {{/linkTo}}</p>
                </div>
            {{/each}}
        </div>
    </script>

    <script type="text/x-handlebars" data-template-name="tweet">
        <div id="detail">
            {{text}}
        </div>
    </script>

ルーター

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Router.map(function(){
    this.resource('tweets',function(){
        this.resource('tweet',{path: ':tweet_id'})
    });
});

// (1)  App.Router.map(function(){
//        this.resource('tweets')
//        this.resource('tweet',{path: ':tweet_id'})
//      });



App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('tweets');
  }
});

App.TweetsRoute = Ember.Route.extend({
  model: function(){
    var me = [];
    $.getJSON("http://search.twitter.com/search.json?q=emberjs&rpp=200&count=200&callback=?", 
      {},
      function (data) {
        $.each(data.results,function(k,tweet){
             var tweet = App.Tweet.create({
                created_at: tweet.created_at,
                from_user: tweet.from_user,
                profile_image_url: tweet.profile_image_url,
                text: tweet.text,
                id: tweet.id
             });
             me.pushObject( tweet );
        });
    });
    return me;
  }
});

オブジェクトとコントローラー

App.TweetsController = Ember.ArrayController.extend({});

App.Tweet = Ember.Object.extend({
  created_at: "",
  from_user: "",
  profile_image_url: "",
  text: "",
  id: 0
})

ご覧のとおり、正しいツイートを見つけてツイート テンプレートにレンダリングするルーター (1) にコメントを付けました。ただし、マスター/ディテール アプリケーションとして実装できるように、このルートをネストしたいと考えています。

LOG_TRANSITIONS を使用すると、正しいルートが初期化されていることがわかりますが、ネストされたリソース パスをレンダリングすることができません。

事前に感謝します。

4

1 に答える 1

0

私はこれを機能させました。似たようなことにこだわっている人のために、これが私がやった方法です：

テンプレート - {{#linkTo}} "tweet"... を {{#linkTo}} "tweets.tweet"... に変更し、{{outlet}} を追加しました

<script type="text/x-handlebars" data-template-name="tweets">
    <div id="stream">
        {{#each tweet in controller}}
            <div class="tweet">
                <p class="tweet_text">{{tweet.text}}</p>
                <p> {{#linkTo "tweets.tweet" tweet}} {{tweet.id}} {{/linkTo}}</p>
            </div>
        {{/each}}
    </div>
    {{ outlet }}
</script>

ルーター - 「this.resource」を「this.route」に変更

App.Router.map(function(){
    this.resource('tweets',function(){
        this.route('tweet',{path: ':tweet_id'})
    });
});

警告

これは回避策であり、ネストされたリソースはこのコンテキストでは正しいアプローチだったと思います。ネストされたルートは「動詞」またはアクション ルートであるべきであることを理解しています。誰かが質問への正しいアプローチを知っていれば、私はまだ感謝していますが、上記が関連する他の人に役立つことを願っています.

于 2013-03-24T10:39:45.933 に答える