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;
}
});
Instead of stuff.push you need to use Embers pushObject
which will notify listeners of an object that there was a change to it.
Here's the updated jsfiddle: http://jsfiddle.net/UjacC/2/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With