当我在 Emberjs 中使用 {{link-to}} 中的 id 刷新 url 时,子出口变为空

Child outlet goes empty when I refresh the url with id from {{link-to}} in Emberjs

本文关键字:url 出口 刷新 中的 Emberjs link-to id      更新时间:2023-09-26

我有一个奇怪的问题,每当我使用 id 刷新页面时,子出口就会变空。我有一个由 {{link-to}} 助手生成的列表。

<script type="text/x-handlebars" id="twod">
        <div class="row">
            <div class="span4">
                <img src="/img/2DPipeline.jpg" />
            </div>
            <div class="span3">
                <h4>People with Roles</h4>
             <div class="row">
                 <div class="span2">    
                        <ul>
                            {{#each item in model}}
                <li>{{#link-to 'twoduser' item}}{{item.firstname}} {{/link-to}}</li>
                            {{/each}}
                        </ul>
                    </div>
                    <div class="row">
                        <div class="span">
                            {{outlet}}
                        </div>
                    </div>
                </div>
        </div>
        </script>

这是双用户模板,

<script type="text/x-handlebars" data-template-name="twoduser">
        <div class="row">
            <div class="span3">
              Full Name: {{firstname}}{{lastname}}
              EMail: {{email}}
            </div>
        </div>
        </script>

应用.js,

    App.Router.map(function() {
        this.resource('twod', function() {
            this.resource('twoduser', {
                path : ':user_id'
            });
        });
        this.resource('threed');
    });
App.TwoduserRoute = Ember.Route.extend({
    model : function(params) {
        return App.Twod.findBy(params.user_id);
    }
});
App.Twod.reopenClass({
    findAll : function() {
        return new Ember.RSVP.Promise(function(resolve, reject) {
            $.getJSON("http://pioneerdev.us/users/index", function(data) {
                var result = data.users.map(function(row) {
                    return App.Twod.create(row);
                });
                resolve(result);
            }).fail(reject);
        });
    },
    findBy : function(user_id) {
        var user = App.Twod.create();
        $.getJSON("http://ankur.local/users/byId/" + user_id, function(data) {
            user.setProperties(data.user);
        });
        user.set("user_id", user_id);
        return user;
    }
});
App.TwodRoute = Ember.Route.extend({
    model : function() {
        return App.Twod.findAll();
    }
});

单独选择每个都可以正常工作并填充子插座,但是当我刷新它时,它会变为空白。

任何想法可能导致问题的原因?

我可以看到两个可能的问题。

首先是您的 URL 在 findAllfindBy 之间不同。 这是故意的吗?

第二种是findAll返回一个余烬承诺(Ember.RSVP.Promise),但findBy没有。

[更新]:基于评论中的JSBin:http://jsbin.com/iPUxuJU/1/

这里的问题是 API 端点在user响应中返回一个数组。 它目前看起来像这样:

{user : [{ ... }] }

理想情况下,它看起来像这样:

{user : {....} }

您可以更改 API 终结点,也可以更新代码以从该数组中提取第一个元素。 而不是:

user.setProperties(data.user);

你可以做:

user.setProperties(data.user[0]);

这是一个修改后的JSBin: http://jsbin.com/oquBoMA/1#/twod/2