定义模板
<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" }
];
定义 Controller
App.MarketsController = Ember.ObjectController.extend({});
App.MarketsSourcesController = Ember.ObjectController.extend({});
我想在使用 EmberJs 点击 {{#linkTo}} 时看到子内容
在这里,我看不到我想要的结果。_
当我单击左侧的某些 anchor 标记时,它会在右侧显示黑色内容
我认为,“Sources”模型没有与“markets/soruces”模板集成。
当我单击左侧的 anchor 标记时,我希望看到源模型的正确结果。
如果可能的话,我想在 jsbin 或 jsfiddle 上查看结果
最佳答案
踢腿和咯咯笑的随机信息。
细节1,路由与其父资源共享相同的资源。
细节 2,当您设置 linkTo 时,您将发送与该路由相关的模型或该模型的 ID。
细节3,由于市场和来源之间存在一对多关系,因此您需要在ember数据中设置一些额外的查询助手(这样您就可以通过markets_id而不是来源的id进行查询)
话虽如此,这里有一个可以运行的 jsbin(虽然不花哨,但我并不为自己的 css 技能感到自豪)
关于jquery - 我想在使用 Ember.Js 单击导航时查看内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17736559/