没有调用emberjs didInsertElement

时间:2013-07-19 13:25:13

标签: jquery ember.js handlebars.js

我对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");
    }
});

我做错了什么?

1 个答案:

答案 0 :(得分:4)

applicationRoute中覆盖renderTemplate。因此,永远不会呈现ApplicationView。您不需要容器模板。您的根模板应该是application

主页的Ember.View和模板也不匹配。您为模板homepageContent和视图App.HomeView命名。 Ember.js会根据您的要求呈现homepageContent,但找不到App.HomepageContentView。 <{1}}永远不会被使用。

我在你的小提琴中做了更正:http://jsfiddle.net/QZZFY/5/