[英]Emberjs 1.0: How to create Models and display them in another route?
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"
错误:“StartView中的内容未定义”
Here is the code 这是代码
http://jsfiddle.net/insnet/cmBgz/21/ 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/ 我更新了你的小提琴到一个工作版本: 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. 1 - 此绑定不起作用,因为您正在引用控制器类,而不是由Ember框架创建的实例。
App.PhotosView = Ember.CollectionView.extend({
contentBinding : 'App.StartController.content',
2 - The log message in your View was wrong and cannot work that way. 2 - View中的日志消息错误,无法以这种方式工作。 If you want to access the 'underlying thing' of a view, always use the property 'context'.
如果要访问视图的“基础事物”,请始终使用属性“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: a - 这是查找startController实例并将其内容设置为照片路径生成的控制器内容的可能方法:
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 ): b - 另一种可能性是手动声明路径的控制器并使用Ember Dependency Injection( 可能是最“愚蠢”的解决方案 ):
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}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.