Ember 模型未使用 Link-to 动态绑定
Ember model Not Bind Dynamically using Link-to
我创建了一个 ember 演示,一个父视图和它的子视图
这是父视图
<h1>A list of Todo Tasks</h1>
<ul>
{{#each model as |todo|}}
<li>{{#link-to "todos.details" todo}}{{todo.desc}}{{/link-to}}</li>
{{/each}}
</ul>
{{outlet}}
它的js登录是
从 'ember' 导入 Ember;
export default Ember.Route.extend({
model (){
return [{
"id" : 1,
"desc" : "Try use ember"
},
{
"id" : 2,
"desc" : "Add it to github"
},
];
}
});
但是当我使用 link-to 导航时,除非我刷新页面,否则数据不会显示
这是子视图
<h2>The Details for <span style="color: green;">{{model.name}}</span> is : </h2>
{{#if model.error}}
<p>{{model.message}}</p>
{{else}}
<ul>
{{#each model.steps as |task|}}
<li>{{task.do}}</li>
{{/each}}
</ul>
{{/if}}
{{outlet}}
及其js逻辑
import Ember from 'ember';
export default Ember.Route.extend({
model(params){
if(params.id == "1"){
return {
name : "Ember SetUp",
steps : [{
id :1,
do : "Download Ember Cli"
},
{
id :2,
do : "Generate New Project"
},
{
id :3,
do : "Generate Pages&Routes"
}
]
};
}
else{
return {
error : true,
name : "Not Found",
message : "There is no task with this id"
}
}
}
});
iam 使用 ember 2.5,这是路由器的一部分
this.route('todos', function() {
this.route('details',{path : "/:id"});
});
{{#link-to "todos.details" todo}}
由于你提供的是对象todo
,所以它不会执行模型钩子。
所以试试
{{#link-to "todos.details" todo.id}}
参考这里:https://guides.emberjs.com/v2.13.0/routing/specifying-a-routes-model/#toc_dynamic-models
Note: A route with a dynamic segment will always have its model hook
called when it is entered via the URL. If the route is entered through
a transition (e.g. when using the link-to Handlebars helper), and a
model context is provided (second argument to link-to), then the hook
is not executed. If an identifier (such as an id or slug) is provided
instead then the model hook will be executed.
确认,这里是视频的 OP。对于那个很抱歉。我的小错误,我应该在视频的评论中解决这个问题并尝试修改它。对困惑感到抱歉! D:
我创建了一个 ember 演示,一个父视图和它的子视图 这是父视图
<h1>A list of Todo Tasks</h1>
<ul>
{{#each model as |todo|}}
<li>{{#link-to "todos.details" todo}}{{todo.desc}}{{/link-to}}</li>
{{/each}}
</ul>
{{outlet}}
它的js登录是 从 'ember' 导入 Ember;
export default Ember.Route.extend({
model (){
return [{
"id" : 1,
"desc" : "Try use ember"
},
{
"id" : 2,
"desc" : "Add it to github"
},
];
}
});
但是当我使用 link-to 导航时,除非我刷新页面,否则数据不会显示 这是子视图
<h2>The Details for <span style="color: green;">{{model.name}}</span> is : </h2>
{{#if model.error}}
<p>{{model.message}}</p>
{{else}}
<ul>
{{#each model.steps as |task|}}
<li>{{task.do}}</li>
{{/each}}
</ul>
{{/if}}
{{outlet}}
及其js逻辑
import Ember from 'ember';
export default Ember.Route.extend({
model(params){
if(params.id == "1"){
return {
name : "Ember SetUp",
steps : [{
id :1,
do : "Download Ember Cli"
},
{
id :2,
do : "Generate New Project"
},
{
id :3,
do : "Generate Pages&Routes"
}
]
};
}
else{
return {
error : true,
name : "Not Found",
message : "There is no task with this id"
}
}
}
});
iam 使用 ember 2.5,这是路由器的一部分
this.route('todos', function() {
this.route('details',{path : "/:id"});
});
{{#link-to "todos.details" todo}}
由于你提供的是对象todo
,所以它不会执行模型钩子。
所以试试
{{#link-to "todos.details" todo.id}}
参考这里:https://guides.emberjs.com/v2.13.0/routing/specifying-a-routes-model/#toc_dynamic-models
Note: A route with a dynamic segment will always have its model hook called when it is entered via the URL. If the route is entered through a transition (e.g. when using the link-to Handlebars helper), and a model context is provided (second argument to link-to), then the hook is not executed. If an identifier (such as an id or slug) is provided instead then the model hook will be executed.
确认,这里是视频的 OP。对于那个很抱歉。我的小错误,我应该在视频的评论中解决这个问题并尝试修改它。对困惑感到抱歉! D: