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具有内置的关系,用于定义两个模型之间的关系。 |