阅读(1.7k) 书签赞(0) 我要纠错

EmberJS 使用记录

2018-01-03 13:56 更新

使用记录

您还可以在加载记录时更改属性值，这些行为与正常属性一样。使用 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文件。

以上内容是否对您有帮助：

写笔记

我要补充