2013-03-03 66 views
1

我试图同步在视图中显示的变量,但没有任何反应。 我创建了一个 JSFiddle http://jsfiddle.net/HKgYn/1/EmberJS视图绑定变量

<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); 
    } 
}); 

我不知道什么我丢失或我在做什么错了,有的帮助是极大的希望。

谢谢。

回答

2

主要问题是在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