Javascript Wakanda：如何在属性更改时更改自定义小部件的类？_Javascript_Class_Wakanda

Javascript Wakanda：如何在属性更改时更改自定义小部件的类？

javascript class

Javascript Wakanda：如何在属性更改时更改自定义小部件的类？,javascript,class,wakanda,Javascript,Class,Wakanda,我正在Wakanda创建一个自定义小部件此小部件必须更改属性函数中的类。例如，如果属性shadowDepth=2，那么我将把类设置为mdl shadow--2dp，否则如果shadowDepth=6，我将把类设置为mdl shadow--6dp 我怎样才能这样更改类？最常用的方法如下：向自定义小部件添加enum属性考虑小部件初始化时的现有类使用onChange触发器应用所需的类让我们分别查看每个步骤： 1.添加枚举自定义属性我希望您知道如何创建自定义小部件。让我们将该属性添加到wid

我正在Wakanda创建一个自定义小部件

此小部件必须更改属性函数中的类。例如，如果属性shadowDepth=2，那么我将把类设置为mdl shadow--2dp，否则如果shadowDepth=6，我将把类设置为mdl shadow--6dp

我怎样才能这样更改类？

最常用的方法如下：

向自定义小部件添加

enum

属性

考虑小部件初始化时的现有类

使用

onChange

触发器应用所需的类

让我们分别查看每个步骤：

1.添加枚举自定义属性我希望您知道如何创建自定义小部件。让我们将该属性添加到

widget.js

中的小部件定义中：

var myWidget = widget.create('myWidget', {
  // widget attributes
});

对于

enum

属性，可以按如下方式定义它：

shadowDepth: widget.property({
  type: 'enum',
  description: 'Shadow depth for MDL widget',
  values: {
    'mdl-shadow--1dp': '1',
    'mdl-shadow--2dp': '2',
    'mdl-shadow--3dp': '3',
    'mdl-shadow--4dp': '4',
    'mdl-shadow--5dp': '5',
    'mdl-shadow--6dp': '6'
  },
  defaultValue: 'mdl-shadow--2dp',
  bindable: false
})

_changeShadowDepth: function(value) {
  var $node = $(this.node); // jQuery is included in the prototype, do not worry
  [
    'mdl-shadow--1dp', 'mdl-shadow--2dp', 'mdl-shadow--3dp',
    'mdl-shadow--4dp', 'mdl-shadow--5dp', 'mdl-shadow--6dp'
  ].forEach(function(klass) {
    $node.removeClass(klass);
  });
  if (value) {
    $node.addClass(value);
  }
},

通过这种方式，您添加了

enum

属性，该属性目前不起任何作用

2.如果小部件已经有一个类，则设置属性值（initialValue）为了检索可在DOM中分配的小部件的初始值，我们在

defaultValue

之后的属性属性中定义

defaultValueCallback

函数，如下所示：

  defaultValueCallback: function() {
    var r = /mdl-shadow--\ddp/.exec(this.node.className); // regex are cool
    return r[r.length - 1] || 'mdl-shadow--2dp'; // return the latest occurrence of the class or the default value
  },

3.onChange触发器在小部件的

init

属性声明中添加以下代码：

init: function() {
  // first call to set the attribute
  this._changeShadowDepth(this.shadowDepth());
  // onChange event
  this.shadowDepth.onChange(this._changeShadowDepth);
}

并添加

\u changeShadowDepth

功能，如下所示：

shadowDepth: widget.property({
  type: 'enum',
  description: 'Shadow depth for MDL widget',
  values: {
    'mdl-shadow--1dp': '1',
    'mdl-shadow--2dp': '2',
    'mdl-shadow--3dp': '3',
    'mdl-shadow--4dp': '4',
    'mdl-shadow--5dp': '5',
    'mdl-shadow--6dp': '6'
  },
  defaultValue: 'mdl-shadow--2dp',
  bindable: false
})

_changeShadowDepth: function(value) {
  var $node = $(this.node); // jQuery is included in the prototype, do not worry
  [
    'mdl-shadow--1dp', 'mdl-shadow--2dp', 'mdl-shadow--3dp',
    'mdl-shadow--4dp', 'mdl-shadow--5dp', 'mdl-shadow--6dp'
  ].forEach(function(klass) {
    $node.removeClass(klass);
  });
  if (value) {
    $node.addClass(value);
  }
},

这与官员更改align（background align）属性时使用的方法完全相同。