CODEWITHSUNDEEP
variablesbindingviewember.js
fernyb
fernyb

Reputation: 983

EmberJS view binding variables

I'm trying to sync the variable that is being displayed in the view but nothing happens. I've created a 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);
  }
});

I'm not sure what I'm missing or what I'm doing wrong, some help is greatly wanted.

Thanks.

Upvotes: 1

Views: 3075

Answers (1)

ahmacleod
ahmacleod

Reputation: 4310

The main problem is the binding path to photoAlbumController within PhotoAlbumView.

Change it to:

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

Here it is worked out in a jsfiddle.

That said, I would propose a simpler structure. Consider the following:

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

With templates:

<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>

That's all you need, and you can juice up the photo album view with whatever additional functionality you need.

Here's the corresponding jsfiddle.

Upvotes: 2

Related Questions