1

私は 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) は正常に機能します。私の 2 番目の呼び出しだけが、DOM に空の handlebar-script-tag を配置するだけです。

それで、私はここで何が欠けていますか？

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 のデータを「content」プロパティ内に配置する必要があります。

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 に答える