閱讀(1.7k) 書簽贊(0) 我要糾錯(cuò)

EmberJS 使用記錄

2018-01-03 13:56 更新

使用記錄

您還可以在加載記錄時(shí)更改屬性值，這些行為與正常屬性一樣。使用 set()和 get()方法處理屬性。通過調(diào)用save()和rollback()方法，您可以堅(jiān)持?jǐn)?shù)據(jù)的更改。

var VarName = this.store.find();
VarName.set('attr', "value"); //after loading the record

在上面的代碼中，“VarName”是 store.find()方法的var名稱，并使用“VarName”設(shè)置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>

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

將以上代碼保存在 records_model.html 文件中
在瀏覽器中打開此HTML文件。

以上內(nèi)容是否對(duì)您有幫助：

寫筆記

我要補(bǔ)充