javascript - Live Sorting or Fitering a Model using Textbox in Ember -
i watching ember screencasts & stumbled upon autocomplete-widget. tried implement it's not working seems.
i getting data using $.getjson , want filter using textbox.
here's have tried,
app = ember.application.create(); app.model = ember.object.extend({ }); app.indexroute = ember.route.extend({ redirect : function() { this.transitionto('users'); } }); app.userscontroller = ember.arraycontroller.extend({ filteredcontent : function() { var searchtext = this.get('searchtext'), regex = new regexp(searchtext, 'i'); return this.get('model').filter(function(item) { return regex.test(item.name); }); }.property('searchtext', 'model') }); app.users = app.model.extend({ id : "", name : "" }); app.usersroute = ember.route.extend({ model : function() { return app.users.findall(); }, setupcontroller : function(controller, model) { controller.set('model', model); } }); app.users.reopenclass({ findall : function() { return $.getjson("user.php", function(data) { return data.map(function(row) { return app.users.create(row); }); }); } }); app.router.map(function() { this.resource("users", { path : "/users" }); }); here's html,
<body> <script type="text/x-handlebars" data-template-name="users"> {{view ember.textfield value=searchtext}} <button {{action last}}>filter</button> <button {{action refresh}}>refresh</button> {{#each item in content }} <tr><td> <p> {{item.name}}</p> </td></tr> {{/each}} </script> <script type="text/x-handlebars"> <h1>application template</h1> {{outlet}} </script> </body> i stuck on should make changes, need pointers.
update: though getting expected outcome getting
uncaught typeerror: cannot read property 'selectedindex' of undefined any idea why getting this?
i think returning before promise $.getjson has been fulfilled. try changing app.user.findall returns results inside success callback. specifically, findall implementation might like:
app.users.reopenclass({ findall: function() { return $.getjson("https://api.github.com/users/rjackson/repos", function(data) { return data.map(function(row) { return app.users.create(row); }); }); } }); also, not believe need manually create arrayproxy object. return array routes model hook should suffice.
i made additional tweaks original (including using sample json endpoint) here: http://jsbin.com/owubemu/3/edit
updated: 2013/08/30
the selectedindex error being caused html comments in 'users' template. handlebars comments should {{! }} or {{!-- --}}. html comments causing bizare escaping when parsing template caused not able bind properties properly.
Comments
Post a Comment