0

我正在创建一个 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;
  }
});

对象和控制器

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 回答