codecamp

EmberJS 观察器

观察器

观察器更新计算属性的文本。它在文本更新或更改时触发。

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'
});

在上面的代码中,

  • 计算的属性函数 fullName 具有称为 Name 的变量。这最初将值保存为 Yudistra

  • NameChanged computed属性函数将 Name 变量设置为具有 observer 属性的新名称 Jhon 此属性在更改名称值期间触发,并将值分配给 fulName 计算的属性函数。

例子

<!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>

输出

让我们执行以下步骤,看看上面的代码如何工作:

  • 将以上代码保存在 obsrvers.html 文件中。

  • 在浏览器中打开此HTML文件。

下表列出了观察者的属性:

序号实例和描述
1 观察器和异步

Ember.js中的观察器当前是同步的。
2 声明观察器

声明一个没有原型扩展和类定义之外的obsever。
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }