Question

我正在尝试使用ember.js，我正在努力将一系列项目呈现给模板：

的index.html

  <script type="text/x-handlebars">
    {{App.test}}
  </script>

  <script type="text/x-handlebars">
    {{#each App.eventsController}}
        <p>{{title}}</p>
    {{/each}}
  </script>

  <!-- le javascript -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
  <script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
  <script src="js/libs/ember-1.0.pre.min.js"></script>
  <script src="js/app.js"></script>
</body>

app.js

var App = Em.Application.create({
    test : 'does it work?...'
});

App.Event = Ember.Object.extend({
    title: '',
    body: ''
});

App.eventsController = Ember.ArrayController.create({

    events: [],

    init: function() {

        self = this;
        self.pushObject(App.Event.create({
            title: "Event 1",
            body: "Content"
        }));
    }
});

第一个绑定（App.test）确实可以正常工作。只有我的第二次调用除了将空的handlebar-script-tag放入我的DOM之外什么都不做。

那我在这里错过了什么？

Answer 1

如果您覆盖init，则需要确保调用this._super，以便控制器可以完成其设置过程。执行此操作后，您的代码应按预期工作。

init: function() {
    this._super();
    this.get('content').pushObject(App.Event.create({
        title: "Event 1",
        body: "Content"
    }));
}

我已经为你创建了一个jsfiddle，所以你可以看到它正常工作：http://jsfiddle.net/qKXJt/188/

Answer 2

您希望将eventsController的数据放在'content'属性中：

App.eventsController = Ember.ArrayController.create({
    content: [],

    init: function() {
        this.get('content').pushObject(App.Event.create({
            title: "Event 1",
            body: "Content"
        }));
    }
});

您的模板{{#each App.eventsController}}应自动获取更改并显示您的标题。

emberjs ArrayController在模板中不起作用

2 个答案: