1

ビューに表示されている変数を同期しようとしていますが、何も起こりません。JSFiddle を作成しました http://jsfiddle.net/HKgYn/1/

<script type="text/x-handlebars" data-template-name="photo_album">
<!-- I want view.cover to be updated automatically but nothing happens? -->
My Cover: {{ view.cover }}
</script>


App.PhotoAlbumController = Ember.ObjectController.extend({
  cover: '/no-image.jpg' 
});

App.PhotoAlbumView = Ember.View.extend({
  coverBinding: 'App.photoAlbumController.cover' 
});

App.AlbumController = Ember.ObjectController.extend({
  needs: ['photoAlbum'] 
});

App.AlbumRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    var pac = controller.get('controllers.photoAlbum');
    pac.set('cover', model.get('cover_url'));
  },
  model: function(params) {
    return App.Album.find(params.album_id);
  }
});

何が欠けているのか、何が間違っているのかわかりません。助けが必要です。

ありがとう。

4

1 に答える 1

2

主な問題は、 へのバインド パスphotoAlbumControllerですPhotoAlbumView。

次のように変更します。

App.PhotoAlbumView = Ember.View.extend({
  coverBinding: 'controller.controllers.photoAlbum.cover' 
});

ここでは jsfiddle で解決します。

そうは言っても、私はより単純な構造を提案します。次の点を考慮してください。

App.Album = DS.Model.extend({
    coverUrl: DS.attr('string')
});

App.PhotoAlbumView = Ember.View.extend({
    templateName: 'photo-album',
    coverUrl: null
});

App.Router.map(function() {
    this.resource('album', { path: '/album/:album_id' });
});

テンプレートを使用:

<script type="text/x-handlebars" data-template-name="album">
    <h1>{{name}}</h1>
    {{view App.PhotoAlbumView coverUrlBinding="coverUrl"}}
</script>

<script type="text/x-handlebars" data-template-name="photo-album">
    <img {{bindAttr src="view.coverUrl"}} />
</script>

必要なのはこれだけで、フォト アルバム ビューに必要な追加機能を追加することができます。

対応する jsfiddle は次のとおりです。

于 2013-03-03T06:47:47.627 に答える