Emberjs 1.0：如何创建模型并在另一个路线中显示它们？ [英] Emberjs 1.0: How to create Models and display them in another route?
问题描述
错误：StartView中的内容未定义
以下是代码
http://jsfiddle.net/insnet/cmBgz/21/
App = Ember.Application.create（{LOG_TRANSITIONS：true}）;
App.ApplicationController = Ember.Controller.extend（）;
App.ApplicationView = Ember.View.extend（{
templateName：'application'
}）;
/ *路由* /
App.Router.map（function（）{
this.route（start，{path：'/'} ）;
this.route（photos）;
}）;
/ *开始* /
App.StartController = Ember.ArrayController.extend（{
createModels：function（）{
this.set 'content'，Ember.A（））;
this.addObject（Ember.Object.create（{id：1，title：'Hello'}））;
this.addObject （Ember.Object.create（{id：2，title：'Digital'}））;
this.addObject（Ember.Object.create（{id：3，title：'World'}））;
this.transitionToRoute（'photos'）;
}
}）;
/ *照片* /
App.PhotosView = Ember.CollectionView.extend（{
contentBinding：'App.StartController.content'，
didInsertElement：function（）{
console.info（StartView中的内容，this.get（'content'））;
}
}）;
< script type =text / x-handlebarsdata-template-name =application>
< div class =contrainer>
< div class =hero-unit>
< h1>我的应用程式< / h1>
{{outlet}}
< / div>
< / div>
< / script>
< script type =text / x-handlebarsdata-template-name =start>
< h2>查看：开始< / h2>
< button {{actioncreateModels}} class =btn btn-primary>创建模型和goto'/ photos'< / button>
< / script>
< script type =text / x-handlebarsdata-template-name =photos>
< h2>查看：照片< / h2>
{{#each controller}}
< p> {{title}}< / p>
{{/ each}}
< / script>
我将您的小提琴更新为工作版本： http://jsfiddle.net/mavilein/cmBgz/22/
起初，这是小提琴中的错误/误解：
1 - 此绑定不起作用您正在引用控制器类，而不是由Ember框架创建的实例。
App.PhotosView = Ember.CollectionView。扩展（{
contentBinding：'App.StartController.content'，
2 - 日志您的视图中的消息是错误的，无法正常工作，如果要访问视图的底层东西，请始终使用属性上下文。术语内容仅与控制器一起使用。
/ *照片* /
App.PhotosView = Ember.View.extend（{
didInsertElement：function（）{
console.info（StartView中的内容，this.get（'context.content'））;
}
}）;
这是您的问题的可能解决方案：
a - 这是查找startController实例并将其内容设置为照片路由生成的控制器的内容的一种可能方法：
App.PhotosRoute = Ember.Route.extend（{
model：function（）{
var startController = this.controllerFor（start）; //在路由中，您可以使用此方法访问控制器
return startController.get（content）;
}
}）;
b - 另一种可能性是手动声明路由控制器，并使用Ember Dependency Injection（可能是最废除的解决方案）：
App.PhotosController = Ember.ArrayController.extend
需要：[start]，//我需要startController plz！ - >可以通过controllers.start
}访问
/ *相应的你的模板中的每一个都看起来像这样* /
{{#each controller.controllers.start}}
I'am trying to create a collection('content') in one route and pass them to another route to display them. What's wrong here?
Error: "content in StartView undefined"
Here is the code
http://jsfiddle.net/insnet/cmBgz/21/
App = Ember.Application.create({LOG_TRANSITIONS: true});
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
/* Routing */
App.Router.map(function() {
this.route("start", {path: '/'});
this.route("photos");
});
/* Start */
App.StartController = Ember.ArrayController.extend({
createModels: function() {
this.set('content', Ember.A());
this.addObject(Ember.Object.create({id: 1, title: 'Hello'}));
this.addObject(Ember.Object.create({id: 2, title: 'Digital'}));
this.addObject(Ember.Object.create({id: 3, title: 'World'}));
this.transitionToRoute('photos');
}
});
/* Photos */
App.PhotosView = Ember.CollectionView.extend({
contentBinding : 'App.StartController.content',
didInsertElement : function() {
console.info("content in StartView", this.get('content'));
}
});
<script type="text/x-handlebars" data-template-name="application">
<div class="contrainer">
<div class="hero-unit">
<h1>My App</h1>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="start">
<h2>View:Start</h2>
<button {{action "createModels"}} class="btn btn-primary">Create models and goto '/photos'</button>
</script>
<script type="text/x-handlebars" data-template-name="photos">
<h2>View:Photos</h2>
{{#each controller}}
<p>{{title}}</p>
{{/each}}
</script>
I updated your fiddle to a working version: http://jsfiddle.net/mavilein/cmBgz/22/
At first, this were the mistakes/misunderstandings in the fiddle:
1 - This Binding does not work because you are referencing the controller class, not the instance that is created by the Ember framework.
App.PhotosView = Ember.CollectionView.extend({
contentBinding : 'App.StartController.content',
2 - The log message in your View was wrong and cannot work that way. If you want to access the 'underlying thing' of a view, always use the property 'context'. The term content is just used in conjunction with controllers.
/* Photos */
App.PhotosView = Ember.View.extend({
didInsertElement : function() {
console.info("content in StartView", this.get('context.content'));
}
});
This are possible solutions to your problem:
a - This is a possible way to lookup your instance of startController and set its content as content of the generated controller for the photos route:
App.PhotosRoute = Ember.Route.extend({
model : function(){
var startController = this.controllerFor("start"); //in routes you have access to controllers with this method
return startController.get("content");
}
});
b - Another possibility would be to declare the controller for the route manually und use Ember Dependency Injection (likely the most "emberish" solution):
App.PhotosController = Ember.ArrayController.extend({
needs : ["start"], // "I need the startController plz!" -> accessible via "controllers.start"
})
/* The corresponding each in your template would look like this */
{{#each controller.controllers.start}}
这篇关于Emberjs 1.0：如何创建模型并在另一个路线中显示它们？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
