Ember.js路由器：嵌入式资源

Question

我正在创建一个Ember应用程序来显示Twitter提要，但我无法通过嵌入式资源显示单个推文。

代码如下：

模板

    <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;
  }
});

对象＆amp;控制器

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

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

正如你所看到的，我有一个评论我们的路由器（1），它可以找到正确的推文，并在推文模板中呈现它。但是，我希望这个路由是嵌套的，这样我就可以将它实现为Master-Detail应用程序。

使用LOG_TRANSITIONS，我可以看到初始化了正确的路由，但我无法获得要渲染的嵌套资源路径。

任何想法都会非常感谢，提前谢谢。

Answer 1

我得到了这个工作。对于那些坚持类似事情的人来说，这就是我做到的：

模板 - 将{{#linkTo}}“推文”...更改为{{#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'})
    });
});

买者

我认为这是一种解决方法，嵌套资源是此上下文中的正确方法。我知道嵌套路线应该是“动词”或动作路线。如果有人知道对问题采取正确的方法，我仍然会感激不尽，但希望上述内容可以帮助其他人。