EmberJS 定义模型
定义模型
在Emberjs,每个路线都有一个相关的模型。{{link-to}}或transitionTo()方法将一个参数作为实现路由模型钩子的模型。该模型提高了应用程序的鲁棒性和性能。Emberjs使用 Ember Data 来处理服务器中存储的数据。在 ember.js 之后加入 ember-data.js 。
DS.Model.extend();
在上面的代码中,我们在应用程序的每个模型中创建一个DS.Model的子类。
例子
<!DOCTYPE html> <html> <head> <title>Emberjs Defining Models</title> <!-- CDN's--> <script src="/attachements/w3c/handlebars.min.js"></script> <script src="/attachements/w3c/jquery-2.1.3.min.js"></script> <script src="/attachements/w3c/ember.min.js"></script> <script src="/attachements/w3c/ember-template-compiler.js"></script> <script src="/attachements/w3c/ember.debug.js"></script> <script src="/attachements/w3c/ember-data.js"></script> </head> <body> <script type="text/x-handlebars" data-template-name="index"> <h2>Players Name:</h2> {{#each person in controller}} <p>{{person.id}}: {{person.name}}</p> {{/each}} </script> <script type="text/javascript"> App = Ember.Application.create(); //The store cache of all records available in an application App.Store = DS.Store.extend({ //adapter translating requested records into the appropriate calls adapter: 'DS.FixtureAdapter' }); App.ApplicationAdapter = DS.FixtureAdapter.extend(); //defining model App.Person = DS.Model.extend({ name: DS.attr('string') }); App.IndexRoute = Ember.Route.extend({ //index route model: function() { //return the person details return this.store.find('person'); } }); //attach fixtures(sample data) to the model's class App.Person.FIXTURES = [ {id: 1, name: 'Virat'}, {id: 2, name: 'Raina'}, {id: 3, name: 'Dhoni'} ]; </script> </body> </html>
输出
让我们执行以下步骤,看看上面的代码如何工作:
将上述代码保存在 defn_model.html 文件中
在浏览器中打开此HTML文件。
下表列出了属性模型概念:
序号 | 模型概念及描述 |
---|---|
1 | 定义属性 它使用DS.attr指定模型的属性。 |
2 | 定义关系 Ember.js具有内置的关系,用于定义两个模型之间的关系。 |