CODEWITHSUNDEEP
javascriptember.js
timanema
timanema

Reputation: 481

Upgrade to Ember 1.0 computed properties no longer work in views

I upgraded from 0.97 I believe and was even using the configuration setting that the deprecation warnings told me to but that didn't prevent my app from completely breaking on upgrade

my handlebars code has this

<script type="text/x-handlebars" data-template-name="say-hello">
    {{name}}</br>
    {{hello}}
</script>​

And my view code is this

App = Ember.Application.create();

App.myView = Ember.View.create({
    templateName: 'say-hello',
    nameBinding: 'App.arrayProxy.name',
    helloBinding: 'App.arrayProxy.hello',
}).append();

App.arrayProxy = Ember.ArrayProxy.extend({
    name: "test",
    hello: function(){
      return 'hello ' + this.get('name')
    }.property('name')
})

Niether property shows up in the view. It's like bindings don't even work anymore. Even if I add a console.log to hello it never even gets called. For some reason properties have been handled completely different in ember 1.0 which is a very big PITA. Does anyone have any insight on how I do it in the newest version, if I have to add or remove something?

UPDATE: here is a jsfiddle to show how it doesn't work http://jsfiddle.net/664H9/

Upvotes: 2

Views: 665

Answers (1)

sly7_7
sly7_7

Reputation: 12011

There are three things in your jsfiddle which don't work:

  • Appending the view. For me it's better to declare a default template (without data-template-name), and reference the view inside it. Ember will create the view for you

  • Since 1.0 pre, to call view's properties into template, you have to prefix them with view

  • Your bindings can't work, as your are not creating an instance of array proxy, but you're only creating a class (I think that even in 0.9.7, this should not work.

Here is a working jsfiddle : http://jsfiddle.net/Sly7/664H9/22/

<script type="text/x-handlebars">
  {{view App.MyView}}
</script>

<script type="text/x-handlebars" data-template-name="my-view">
  {{view.name}}</br>
  {{view.hello}}
</script>​

App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
  nameBinding: 'App.arrayProxy.name',
  helloBinding: 'App.arrayProxy.hello',
});

App.arrayProxy = Ember.ArrayProxy.create({
  name: "test",
  hello: function(){
    return 'hello ' + this.get('name')
  }.property('name')
});

App.initialize();

​

Upvotes: 4

Related Questions