閱讀(1.9k) 書簽贊(0) 我要糾錯

EmberJS 觀察器

2018-01-03 17:35 更新

觀察器

觀察器更新計算屬性的文本。它在文本更新或更改時觸發(fā)。

fullName: function() {
   var Name = this.get('Name');
   return Name;
}.property('Name'),

NameChanged: function() {
   this.set('Name','Jhon')
}.observes('fullName').on('init')

var person = App.Person.create({
   Name: 'Yudistra'
});

在上面的代碼中，

計算的屬性函數(shù) fullName 具有稱為 Name 的變量。這最初將值保存為 Yudistra 。
NameChanged computed屬性函數(shù)將 Name 變量設(shè)置為具有 observer 屬性的新名稱 Jhon 。此屬性在更改名稱值期間觸發(fā)，并將值分配給 fulName 計算的屬性函數(shù)。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Observer</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/javascript">
         App = Ember.Application.create();

         App.Person = Ember.Object.extend({
            //these will be supplied by `create`
            Name: null,

            fullName: function() {
               //get the Name value
               var Name = this.get('Name');
               //return the Name value
               return Name;
            }.property('Name'),

            NameChanged: function() {
              // deal with the change
              document.write("Name is Updated: ");
              this.set('Name','Jhon')
              //Observers never fire until after the initialization of an object is complete.
            }.observes('fullName').on('init')
         });

         var person = App.Person.create({
            //initial value of Name varialble
            Name: 'Yudistra'
         });
         document.write(person.get('fullName'));
      </script>
   </body>
</html>

輸出

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

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

下表列出了觀察者的屬性：

序號	實例和描述
1	觀察器和異步 Ember.js中的觀察器當(dāng)前是同步的。
2	聲明觀察器聲明一個沒有原型擴(kuò)展和類定義之外的obsever。

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

寫筆記

我要補(bǔ)充