Question

我正在尝试同步视图中显示的变量，但没有任何反应。我创造了一个 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);
  }
});

我不确定我错过了什么或者我做错了什么，非常需要一些帮助。

感谢。

Answer 1

主要问题是photoAlbumController内PhotoAlbumView的绑定路径。

将其更改为：

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

Here it is worked out in a 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>

这就是您所需要的一切，您可以使用您需要的任何其他功能来提升相册视图。

Here's the corresponding jsfiddle

EmberJS查看绑定变量

1 个答案: