QA@IT

Ember.js の binding がうまく動かない

2124 PV

Ember.js の binding を試してみようと思い、以下のようなコードを書いてみました。

<script>
  App = Ember.Application.create({
    UserView: Ember.View.extend({
      userNameBinding: 'App.user.name',
      template: Ember.Handlebars.compile('Name: {{userName}}')
    })
  });

  App.set('user', Ember.Object.create({name: 'foo'}));
</script>
<script type='text/x-handlebars'>
  {{view App.UserView}}
</script>

これを実行すると "Name: " とだけ表示されて、肝心の userName が出力されません。特にスクリプトエラーなどは出ていませんでした。console で調べると、オブジェクトの生成はできているように見えます。

> App.getPath('user.name')
  "foo"

なにか根本的に勘違いしている気がしますが、どこを間違えているかわからないので教えてください。Ember.js のバージョンは v0.9.8.1-575-gf875767 です。

回答

プロバティ名の前に view. を付けると期待通りに動きました。

Ember.Handlebars.compile('Name: {{view.userName}}')

二ヶ月前のコミットでテンプレートの context (this に相当するもの) の初期値が変更されたようです。
https://gist.github.com/2494968

以前のバージョンでは view ヘルパによって context がビューオブジェクトに設定されていましたが、今は親の context を引き継ぐ、ということみたいですね。

編集 履歴 (2)

これで表示できました

<script src="libs/jquery-1.7.2.min.js"></script>
<script src="libs/ember-0.9.8.1.js"></script>
<script>
  App = Ember.Application.create({
    UserView: Ember.View.extend({
      userNameBinding: 'App.user.name',
      template: Ember.Handlebars.compile('Name: {{userName}}')
    })
  });

  App.set('user', Ember.Object.create({name: 'foo'}));
</script>
<body>
<script type='text/x-handlebars'>
  {{view App.UserView}}
</script>
</body>
編集 履歴 (0)
  • うーん。確かに 0.9.8.1 ならこれで動くんですが、edge だと駄目ですね。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。