如何在窗口小部件中挂钩模型的更改

时间:2016-07-06 20:42:30

标签: dojo

我正在尝试响应窗口小部件中模型的某个属性的更改。要清楚,当属性的值发生变化时,我想运行一些代码来对变化作出反应。在父窗口小部件中,我有一个日期选择器,它可以更改模型中的日期。

我无法将自定义setter称为_setParentPropertyAttr ...

如果我将其包含在我的小部件中

table_b

很好用。更改日期选择器会将当前值输出到页面。因此,当模型中的日期发生变化时,我可以将值属性提供给输出窗口小部件。但是我需要做的(我认为)是在日期选择器更改值时在模型中提供带有date属性的自定义属性。

我意识到这个问题有点模糊,但我无法提供代码,因为它是专有的。

我试图通过在我的小部件中手动设置属性来解决问题:

table_a

但这也不起作用。

如果在窗口小部件中设置属性,则不会调用自定义设置器吗?

我有点挣扎,因为没有那么多道场的例子,我们非常感谢任何帮助。

3 个答案:

答案 0 :(得分:1)

您可以在设置/更新窗口小部件的属性时绑定要调用的事件,或者甚至可以使用watch来执行此操作。 但这仅适用于set函数,使用someWidget.someProperty = 5;无法正常工作 让我告诉你dojo是如何做到的。关于魔术制定者和吸气者is explained here的基本知识。

_set: function(/*String*/ name, /*anything*/ value){
    // summary:
    //      Helper function to set new value for specified property, and call handlers
    //      registered with watch() if the value has changed.
    var oldValue = this[name];
    this[name] = value;
    if(this._created && !isEqual(oldValue, value)){
        if(this._watchCallbacks){
            this._watchCallbacks(name, oldValue, value);
        }
        this.emit("attrmodified-" + name, {
            detail: {
                prevValue: oldValue,
                newValue: value
            }
        });
    }
}

代码的和平来自dijit/_WidgetBase_set函数是调用dojoset调用的内容,也是最终设置属性值的地方{ {1}}正如您所看到的那样,this[name] = value;一个名为emit的事件,也称为attrmodified-propertyName

例如,如果在某个地方,我们有:

watchCallbacks

然后我们使用:

on(someWidget, 'attrmodified-myproperty', function(){
    console.log(someWidget.get('myProperty'));
});

该事件将被触发。请注意,someWidget.set('myProperty', 'Hello World!'); 不会触发事件注册。另请注意,如果在我们的小部件中我们定义了魔术设定器:

someWidget.myProperty = 'Hello World!'

没有打电话给_setMyPropertyAttr: function(value) { //do something here with value // do more or less with other logic //but some where within this function we need to cal "_set" this._set('myProperty', value); } ,魔法就不会发生。

正如我在开头所说,我们也可以使用_set

watch

请注意,我们可以在同一个小部件中注册此事件或someWidget.watch('myProperty', function(){ console.log(someWidget.get('myProperty')); }); 功能。

另外,作为一个加号,只需在构造函数对象参数中传递属性名称来创建窗口小部件时就可以触发魔法watch,这也适用于声明性语法,例如:

setter

var someWidget = new MyWidget({
    'myProperty': 'Hello World!!'
});
如果存在,

将触发对<div data-dojo-type="MyWidget" data-dojo-props="myProperty: 'Hello World!!'"></div> 的调用,或者如果不存在,则dojo将使用魔法_setMyPropertyAttr

希望有所帮助

答案 1 :(得分:0)

考虑在您的小部件上使用自定义设置器,您可以在其中添加自定义逻辑。

小部件上自定义设置器的定义示例:

     _setOpenAttr: function(/*Boolean*/ open){
         // execute some custom logic here
         this._set("open", open);
     }

在窗口小部件上设置属性的示例:

widgetRef.set('open', true);

或者,您可以考虑使用dojo/store/Observable

dojo/store/Observable存储包装器,增加了对数据更改通知的支持。

您可以在关注链接上阅读更多相关信息:

https://dojotoolkit.org/reference-guide/1.10/dojo/store/Observable.html

答案 2 :(得分:0)

If figured out the problem. If I set a watch on the model I can then check if indiviual properties have changed in the watch function. I knew it would be something simple!