EmberJS视图绑定变量

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

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

将其更改为：

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。