问题 如何在EmberJS中为少数情况设置一个可观察但不能运行可观察函数的属性


无论如何我们可以避免在少数情况下运行可观察代码?

我怎么试过? 我发现要避免的唯一方法是将新属性作为标志添加到视图中,如果在运行可观察方法代码之前进行检查。

这是基本的 的jsfiddle link am提供基本的观察者功能 HTML

<script type="text/x-handlebars" data-template-name="application">
  {{view MyApp.MyContainerView name="Santa Claus"}}
</script>
<script type="text/x-handlebars" data-template-name="foo">
  {{view.testProp}}
</script>

JS

MyApp = Ember.Application.create({
    autoinit: false
});

MyApp.router = Ember.Router.create({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/'
        })
    })
});

MyApp.ApplicationController = Ember.Controller.extend({});

MyApp.MyContainerView = Em.ContainerView.extend({
    childViews: ['foo'],

    foo: Em.View.extend({
       testProp: 100,
  testPropObservable: function(){
    console.log("Prop Observed");
  }.observes('testProp'),
        init: function() {
            this._super();
            this.set('testProp', 200);//i want to avoid obeserver here
        },
        templateName: 'foo'
    })
});

MyApp.initialize(MyApp.router);

6322
2018-01-09 11:35


起源



答案:


一种替代方法是在运行时添加/删除观察者。鉴于上面的示例,您可以通过调用阻止在init()期间触发观察者 this.addObserver 在值初始化之后

    foo: Em.View.extend({
       testProp: 100,
       testPropDidChange: function(){
         console.log("Value changed to: ", this.get('testProp'));
       },
       init: function() {
         this._super();
         this.set('testProp', 200);//i want to avoid obeserver here
         this.addObserver('testProp', this.testPropDidChange)
        },
        templateName: 'foo'
    })

有关工作示例,请参阅此jsfiddle: http://jsfiddle.net/NSMj8/1/

在ember指南中有一个很好的观察者概述: http://emberjs.com/guides/object-model/observers/

有关如何添加/删除观察者的更多信息,请参阅Ember.Observable的API文档: http://emberjs.com/api/classes/Ember.Observable.html


11
2018-01-09 13:26



是的,你只是更快:),+ 1 BTW :) - sly7_7
该代码只是一个例子来处理它..我同意我们可以在初始化期间添加观察者。我想知道是否有任何反正我们可以在设置值到属性之前避免调用观察者... - thecodejack
不确定你究竟在问什么。观察者的 job 是在财产变更时收到通知。确保您可以通过等待以后创建它们来避免对观察者的调用,如上例所示。一种变化是让一个观察者添加一些其他观察者并可能将其自身移除。有了它,你就可以“避开”主要观察者的初始设置。这就是你想要的吗? - Mike Grassotti
两个快速问题1.我是否需要removeObserver,否则一旦实例被销毁就会删除它? 2.如何检查观察者是否已添加到属性? - Manoharan


答案:


一种替代方法是在运行时添加/删除观察者。鉴于上面的示例,您可以通过调用阻止在init()期间触发观察者 this.addObserver 在值初始化之后

    foo: Em.View.extend({
       testProp: 100,
       testPropDidChange: function(){
         console.log("Value changed to: ", this.get('testProp'));
       },
       init: function() {
         this._super();
         this.set('testProp', 200);//i want to avoid obeserver here
         this.addObserver('testProp', this.testPropDidChange)
        },
        templateName: 'foo'
    })

有关工作示例,请参阅此jsfiddle: http://jsfiddle.net/NSMj8/1/

在ember指南中有一个很好的观察者概述: http://emberjs.com/guides/object-model/observers/

有关如何添加/删除观察者的更多信息,请参阅Ember.Observable的API文档: http://emberjs.com/api/classes/Ember.Observable.html


11
2018-01-09 13:26



是的,你只是更快:),+ 1 BTW :) - sly7_7
该代码只是一个例子来处理它..我同意我们可以在初始化期间添加观察者。我想知道是否有任何反正我们可以在设置值到属性之前避免调用观察者... - thecodejack
不确定你究竟在问什么。观察者的 job 是在财产变更时收到通知。确保您可以通过等待以后创建它们来避免对观察者的调用,如上例所示。一种变化是让一个观察者添加一些其他观察者并可能将其自身移除。有了它,你就可以“避开”主要观察者的初始设置。这就是你想要的吗? - Mike Grassotti
两个快速问题1.我是否需要removeObserver,否则一旦实例被销毁就会删除它? 2.如何检查观察者是否已添加到属性? - Manoharan