我对emberjs很新,并且在尝试使用didInsertElement事件时偶然发现了一个问题。
我创建了一个JSFiddle,您可以看到实际呈现了把手模板,但是在ApplicationView和HomeView中都没有调用didInsertelement事件。
JSFiddle:http://jsfiddle.net/QZZFY/3/
如果链接断开,我的代码:
HTML:
<script type="text/x-handlebars" data-template-name="container">
<!-- Imagine theme header content here -->
{{outlet "leftContent"}}
<!-- some more code here -->
{{outlet "pageContent"}}
<!-- and here -->
{{outlet "rightContent"}}
<!-- and a footer here -->
</script>
<script type="text/x-handlebars" data-template-name="leftSidebar">
<p>A left sidebar</p>
</script>
<script type="text/x-handlebars" data-template-name="rightSidebar">
<p>A right sidebar</p>
</script>
<script type="text/x-handlebars" data-template-name="homepageContent">
<p>This is the {{pageTitle}}!</p>
</script>
使用Javascript:
Ember.LOG_BINDINGS = false;
MyApp = Ember.Application.create();
MyApp.Router.map(function() {
//Home Page
this.route("home", { path: "/" });
});
//=======================
//= ROUTES =
//=======================
MyApp.ApplicationRoute = Ember.Route.extend({
renderTemplate: function() {
this.render("container");
this.render('leftSidebar', { outlet: 'leftContent', into: 'container' });
this.render("rightSidebar", { outlet: 'rightContent', into: 'container' });
}
});
MyApp.HomeRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('pageTitle', "homepage");
},
renderTemplate: function() {
this.render('homepageContent', { outlet: 'pageContent', into: 'container' });
}
});
//=======================
//= CONTROLLERS =
//=======================
MyApp.ApplicationController = Ember.Controller.extend();
MyApp.HomeController = Ember.Controller.extend();
//=======================
//= VIEWS =
//=======================
MyApp.ApplicationView = Ember.View.extend({
didInsertElement: function(event) {
console.debug("Applicationview didInsertElement() called");
}
});
MyApp.HomeView = Ember.View.extend({
didInsertElement: function(event) {
console.debug("Homeview didInsertElement() called");
}
});
我做错了什么?
答案 0 :(得分:4)
在applicationRoute
中覆盖renderTemplate
。因此,永远不会呈现ApplicationView
。您不需要容器模板。您的根模板应该是application
。
主页的Ember.View和模板也不匹配。您为模板homepageContent
和视图App.HomeView
命名。 Ember.js会根据您的要求呈现homepageContent
,但找不到App.HomepageContentView
。 <{1}}永远不会被使用。
我在你的小提琴中做了更正:http://jsfiddle.net/QZZFY/5/