1

我正在尝试 ember.js，我正在努力将一组项目渲染到模板：

索引.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>

应用程序.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) 确实可以正常工作。只有我的第二个调用除了将一个空的车把脚本标签放入我的 DOM 之外什么都不做。

那么我在这里错过了什么？

4

2 回答 2

2

如果您覆盖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/

于 2012-10-02T14:00:09.133 回答
0

您希望将 eventsController 的数据放在“内容”属性中：

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

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

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

于 2012-10-01T18:10:14.407 回答