Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ember not updating the view on model change

This fiddle has the starter kit recreated, with and extra button that alters the model.

http://jsfiddle.net/UjacC/1/

However, when clicking change, the array changes, but the view is not being updated. Why?

<title>Ember Starter Kit</title>

<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
        <button id="btnChange">change model</button>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
  </script>

  <script>
         $(document).ready(function(){
          console.log(stuff);

          $("#btnChange").click(function(){
            stuff.push("d");
            console.log("change",stuff);
          });

      });
    </script>

</body>




App = Ember.Application.create();

var stuff = ["a","7","b","c"];

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return stuff;
  }
});
like image 358
Ska Avatar asked Sep 13 '13 19:09

Ska


1 Answers

Instead of stuff.push you need to use Embers pushObject which will notify listeners of an object that there was a change to it.

EDIT:

Here's the updated jsfiddle: http://jsfiddle.net/UjacC/2/

like image 169
John Avatar answered Sep 22 '22 18:09

John