1

私はEmberとHandlebarsを初めて使用します。動的コンテンツを含むテーブルを作成しようとしています。コードをjsfiddleに追加します

私は次のコードを持っています：

<script type="text/x-handlebars">
<table border="1" bordercolor="FFCC00" style="background-color:FFFFCC" width="400" cellpadding="3" cellspacing="3">
  {{#each Table.tableController}}
  <tbody>
<tr>
    <td width ="30%">{{title}}</td>
    <td width ="30%">{{artist}}</td>
            <td width ="40%">{{genre}}</td>
</tr>
   </tbody>
  {{/each}}
</table>

コントローラからのコンテンツをバインドする単純なテーブル。

そして、これが私のコントローラーとアプリケーションです。

Table = Ember.Application.create({});

Table.Cell = Ember.Object.extend({
title: null,
artist: null,
genre: null,
listens: 0
});

Table.tableController = Ember.ArrayProxy.create({
content: [],
init: function() {
    var data = Table.Cell.create({
    title: 'Ruby',
    artist: 'Kaiser Chiefs',
    genre: 'Indie Rock',
        });
    this.pushObject(data);
    data = Table.Cell.create({
    title: 'Somebody Told Me',
    artist: 'Killers',
    genre: 'Indie Rock',
        });
        this.pushObject(data);
    },
    createSong: function(title, artist, genre) {
    var cell = Table.Cell.create({
    title: title,
    artist: artist,
    genre: genre,
        });
    this.pushObject(cell);
    },
});

それはうまく機能しています。

今、私は新しい曲を追加したいと思います、そして私は次の行でChromeコンソールを介してこれを行っています：

 Table.tableController.createSong('Feiticeira', 'Deftones', 'Alternative');

新しいオブジェクトが作成され、コンテンツ配列に挿入されていることを確認できます。しかし、私のテーブルに変更はありません。

私は何が間違っているのですか？テーブルが新しいコンテンツを作成しないのはなぜですか？

私はあなたが私を助けてくれるようにこのコードをjsfiddleにプッシュしました。 これがコードへのリンクです。

4

1 に答える 1

3

更新された分析

を呼び出すのを忘れthis._super();たためinit、インスタンスでバインディング管理をセットアップできませんでした。(修正版)

典型的な Ember の落とし穴で感じたこと: 初期値は、すべてのクラス インスタンスで共有されるため、決してオブジェクトであってはなりません... 詳細については、この記事を参照してください。

FIX SAMPLE -引き続き推奨される実装

JSFiddle @ http://jsfiddle.net/MikeAski/AgyAk/12/を更新して、いくつかの改善を加えました(最も注目すべき点は、直接ではなくコントローラーを使用することArrayProxyです。より慣用的であり、インフラストラクチャに切り替える準備ができていRouterます)。

于 2012-07-23T13:22:38.160 に答える