ember.js - Ember Starter Kit with Ember Data -
ember 1.0.0 rc3 ships starter kit quite simplistic demo display 3 colors in list.
the model data inserted directly on indexroute this:
app.indexroute = ember.route.extend({ model: function() { return ['red', 'yellow', 'blue']; } });
i tried change simple demo use ember-data (models, store, ...). however, no success. console output of demo is:
debug: ------------------------------- ember-1.0.0-rc.3.js:349 debug: ember.version : 1.0.0-rc.3 ember-1.0.0-rc.3.js:349 debug: handlebars.version : 1.0.0-rc.3 ember-1.0.0-rc.3.js:349 debug: jquery.version : 1.9.1 ember-1.0.0-rc.3.js:349 debug: ------------------------------- ember-1.0.0-rc.3.js:349 uncaught typeerror: cannot call method 'find' of undefined appdemo.js:8 uncaught error: assertion failed: ember.collectionview's content must implement ember.array. passed <(generated index controller):ember232> ember-1.0.0-rc.3.js:52
my modified script looks this:
app = ember.application.create(); app.router.map(function() { // put routes here }); app.indexroute = ember.route.extend({ model: app.color.find() }); app.colorscontroller = ember.arraycontroller.extend(); // models app.store = ds.store.extend({ revision: 12, adapter: 'ds.fixtureadapter' }); app.color = ds.model.extend({ name: ds.attr('string') }); app.color.fixtures = [{name: 1}, {name: 2}, {name: 3}, {name: 4}, {name: 5}, {name: 6}];
my html looks this:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ember starter kit</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <script type="text/x-handlebars"> <h2>welcome ember.js</h2> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> <ul> {{#each color in controller}} <li>{{color.name}}</li> {{/each}} </ul> </script> <script src="js/libs/jquery-1.9.1.js"></script> <script src="js/libs/handlebars-1.0.0-rc.3.js"></script> <script src="js/libs/ember-1.0.0-rc.3.js"></script> <script src="js/libs/ember-data-latest.js"></script> <script src="js/appdemo.js"></script> </body> </html>
what doing wrong?
first error lies in
app.indexroute = ember.route.extend({ model: app.color.find() });
you must define model option function like:
app.indexroute = ember.route.extend({ model: function() { return app.color.find(); } });
the second error i'm little uncertain on try out first.