javascript - ember.js - update template from whatever controller observes -
i getting started ember.js. want update controller's data based on server request made controller; i.e: mycontroller should update state when indexcontroller has changed property. think have right, i'm not sure how update template based on observed change. here's have 'til now:
<script type="text/x-handlebars" data-template-name="application"> <div> {{outlet}} </div> </script> <script type="text/x-handlebars" data-template-name="index"> <form> <label for="go">data</label> <input type="text" id="go" /> <button type="button" {{action "finddata"}}>find data</button> </form> </script> <script type="text/x-handlebars" data-template-name="my"> <ul> {{#each entry in controller}} <li>{{entry}}</li> {{/each}} </ul> </script>
these templates stored in index.html
var app = ember.application.create() app.indexcontroller = ember.controller.extend({ myproperty: false, finddata: function() { console.log("requesting data server .."); myproperty = true; } }); app.mycontroller = ember.controller.extend({ needs: ['index'], mypropertyhaschanged: function() { var propertychanged = this.get('controllers.index.myproperty'); if (propertychanged) { console.log("property has changed"); return ["apple", "orange"]; } }.observes('controllers.index.myproperty') });
and actual ember.js code. how can have data in "my" template updated based on whenever button in index template pressed ? should list of 2 elements ("apple" , "orange")
try setting value of controller content list want displayed in mypropertyhaschanged
function:
this.set('content', ["apple", "orange"]);