CODEWITHSUNDEEP
viewmodelember.js
Ska
Ska

Reputation: 6888

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

Upvotes: 5

Views: 3632

Answers (1)

John
John

Reputation: 3296

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/

Upvotes: 7

Related Questions