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主要问题是 inside的绑定路径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 回答