在 emberJs 中单击 {{#linkTo}} 时看不到子内容答案

【问题标题】：I cannot see the sub content when I click {{#linkTo}} in emberJs在 emberJs 中单击 {{#linkTo}} 时看不到子内容
【发布时间】：2013-07-18 09:18:24
【问题描述】：

我喜欢使用 EmberJs 点击 {{#linkTo}} 时查看子内容
这是模板文件

<script type="text/x-handlebars" id="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" id="markets/sources">
    {{#each model }}
        <span>{{source_channel}}</span>
        <span>{{handle}}</span>
    {{/each}}

</script>

<script type="text/x-handlebars" id="markets">
    <div class="leftside">
    {{#each model }}
        <span>{{name}}</span>
        <span>{{created}}</span>
        {{#linkTo 'markets.sources' this class="link" }}<span>go to</span>{{/linkTo}}  
    {{/each}}
    </div>
    <div class="rightside">
        {{outlet}}
    </div>
</script>

这是定义路径的文件。

var App = Ember.Application.create();

App.Router.map(function() {
    this.route("index", {path: "/"});                                                       
    this.resource('markets', {path: "/markets"}, function() {
        this.route("sources", { path: "/:markets_id" });
    });
});

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

App.MarketsRoute = Ember.Route.extend({
    model: function () {
        return App.Markets.find();
    }
});

App.MarketsSourcesRoute = Ember.Route.extend({
    model: function(){
        return App.Sources.find();
    },
    serialize: function(model) {
        return { markets_id: model.id };
    }
});

这是模型文件

App.Store = DS.Store.extend({
   revision: 12,
   adapter: DS.FixtureAdapter
});

App.Markets = DS.Model.extend({
    name: DS.attr("string"),
    created: DS.attr("string")
});

App.Sources = DS.Model.extend({
   source_channel: DS.attr("string"),
   handle: DS.attr("handle")
});

App.Sources.FIXTURES = [
    {id:1, markets_id:"1310", source_channel:"sc1", handle: "hn1"},
    {id:2, markets_id:"1310", source_channel:"sc2", handle: "hn2"},
    {id:3, markets_id:"1310", source_channel:"sc3", handle: "hn3"},
    {id:4, markets_id:"1512", source_channel:"sc4", handle: "hn4"},
    {id:5, markets_id:"1512", source_channel:"sc5", handle: "hn5"}
];

App.Markets.FIXTURES = [
    {id:"1310", name:"test1", created:"2012-2-3"  },
    {id:"1320", name:"test2", created:"2012-2-13"  },
    {id:"1512", name:"test3", created:"2012-2-23"  }
];

这是控制器部分

App.MarketsController = Ember.ObjectController.extend({}); 
App.MarketsSourcesController = Ember.ObjectController.extend({});

在这里，我看不到我想要的结果。_ 当我单击左侧的某个锚标记时，它会在右侧显示黑色内容
我认为，“来源”模型没有与“市场/来源”模板集成。
当我单击左侧的锚标记时，我希望看到源模型的正确结果。

如果可能，我想在 jsbin 或 jsfiddle 上查看结果

【问题讨论】：

标签： templates model ember.js

【解决方案1】：

原因是您的App.Markets 不包含source_channel 和handle 属性。

您可能期望调用App.MarketsSourcesRoute 的model 钩子，它将获得正确的模型。但是model 不会被调用，您通过linkTo 助手传递的内容将是模型，在您的情况下将是App.Markets 中的单行。如Ember guides 中所说

具有动态段的路由只有在通过 URL 输入时才会调用其模型挂钩。如果路由是通过转换输入的（例如，当使用 linkTo Handlebars 助手时），则已经提供了模型上下文并且不会执行挂钩。没有动态段的路由将始终执行模型挂钩。

所以最好在你的setupcontroller 中调用App.Sources.find()，因为它总是被调用。

我已更新您的jsbin。如果您有任何疑问，请回复。

【讨论】：