EmberJS 使用记录
使用记录
您还可以在加载记录时更改属性值,这些行为与正常属性一样。使用 set()和 get()方法处理属性。通过调用save()和rollback()方法,您可以坚持数据的更改。
var VarName = this.store.find();
VarName.set('attr', "value"); //after loading the record
在上面的代码中,“VarName”是 store.find()方法的var名称,并使用“VarName”设置attr值。
例子
<!DOCTYPE html>
<html>
<head>
<title>Emberjs Working With Records</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" id="authors">
<h3>List of Authors: </h3>
{{#each author in content}}
{{#link-to 'authors.rollback' author}}{{author.name}}{{/link-to}}<br/>
{{/each}}
{{outlet}}
</script>
<script type="text/x-handlebars" id="authors/rollback">
<h3>Details</h3>
<p><b>ID: {{id}}</b></p>
<p><b>Name: {{name}}</b></p>
<p><b>Book Name: {{books}}</b></p>
<br/>
<button {{action 'save'}}>Save changes</button>
<button {{action 'cancel'}}>RollBack</button>
</script>
<script type="text/javascript">
App = Ember.Application.create();
App.Router.map(function () {
this.resource("authors", { path: '/' }, function () {
this.route('rollback', { path: '/:author_id' });
});
});
App.AuthorsRoute = Ember.Route.extend({
model: function () {
return this.store.find('author');
}
});
App.AuthorsController = Ember.ArrayController.extend();
App.AuthorsRollbackRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('author', params.author_id);
}
});
App.AuthorsRollbackController = Ember.ObjectController.extend({
actions: {
save: function () {
var author = this.get('model');
author.save().then(function () {
document.write("Record saved");
});
},
cancel: function () {
var author = this.get('model');
author.rollback();
document.write('Record Roll Backed');
},
}
});
//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.create()
});
App.Author = DS.Model.extend({
//data Model
name: DS.attr('string'),
books: DS.attr('string'),
});
//attach fixtures(sample data) to the model's class
App.Author.FIXTURES =[{
id: 1,
name: 'Herbert Schildt',
books: 'C++'},{
id: 2,
name: 'Balaguruswamy',
books: 'Java'
}];
</script>
</body>
</html>
输出
让我们执行以下步骤,看看上面的代码如何工作:
将以上代码保存在 records_model.html 文件中
在浏览器中打开此HTML文件。