# Binding properties to rerender a view?

**URL:** <https://discuss.emberjs.com/t/binding-properties-to-rerender-a-view/4000>\
**Category:** Uncategorized\
**Created:** [January 28, 2014, 10:05am UTC](https://discuss.emberjs.com/t/binding-properties-to-rerender-a-view/4000 "2014-01-28T10:05:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![solex16](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@solex16](https://discuss.emberjs.com/u/solex16)\
**Post date:** [January 28, 2014, 10:05am UTC](https://discuss.emberjs.com/t/binding-properties-to-rerender-a-view/4000/1 "2014-01-28T10:05:11Z")

</div>

What’s the Ember best practice way to bind a model to a view so that if the model changes, then the view rerenders?..

I have a canvas element set up as a view:

```
<div id="canvas_container">
     {{view "App.CanvasView"}}
</div>

```

To allow a user to change a rectangle’s colour, I loop over the data model to load the fillStyle value

```
{{#each}}
     <button {{action 'loadFill' fillStyle}}>Change Colour</button>
{{/each}}

```

Here’s the controller:

```
App.IndexController = Ember.ArrayController.extend({

    actions: {
        loadFill: function(fillStyle) {
            // **How to bind the fillStyle and so rerender the view?**
        }
    }    
});

```

Here’s the view:

```
App.CanvasView = Ember.View.extend({
    tagName: "canvas",
    attributeBindings: ['height', 'width'],
    height: 400,
    width: 600,

    init: function() {
        this._super();
        this.set("controller", App.IndexController.create());
    },

    didInsertElement: function(){
        this.drawItem();
    },

    drawItem: function(){
        var canvas = Ember.get(this, 'element');
        var ctx = canvas.getContext("2d");

        // ****how to bind to controller fillStyle?****
        ctx.fillStyle = this.get('controller.fillStyle');

        ctx.fillRect(0,0,60,100);
    }
});

```

Do I need to set up an observer to trigger the rerender?

---

<div class="post-metadata">

**Author:** ![solex16](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@solex16](https://discuss.emberjs.com/u/solex16)\
**Post date:** [January 29, 2014, 2:23pm UTC](https://discuss.emberjs.com/t/binding-properties-to-rerender-a-view/4000/2 "2014-01-29T14:23:07Z")

</div>

Yes I added an observer to the view:

```
widthChanged: function() {
    console.log('rerender');
    this.rerender();
}.observes('controller.testWidth'),

```

see the fiddle: [Edit fiddle - JSFiddle - Code Playground](http://jsfiddle.net/solex16/F9ZaX/5/)

Resolved

---

<div class="post-metadata">

**Author:** ![jamalsoueidan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jamalsoueidan/32/234_2.png) [@jamalsoueidan](https://discuss.emberjs.com/u/jamalsoueidan)\
**Post date:** [January 29, 2014, 6:27pm UTC](https://discuss.emberjs.com/t/binding-properties-to-rerender-a-view/4000/3 "2014-01-29T18:27:26Z")

</div>

You don’t need to re-render whenever model changes, it can be done behind the scene 😃

{{view Ember.TextField valueBinding=“controllerProperty”}}

More about it here.

[http://emberjs.com/api/classes/Ember.Binding.html](http://emberjs.com/api/classes/Ember.Binding.html)