javascript - Wakanda:如何在属性更改时更改自定义小部件的类？

Question

我正在瓦坎达创建一个自定义小部件。

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

我怎样才能这样改变类(class)？

Answer 1

最常用的方法如下:

1. 向自定义小部件添加 enum 属性。
2. 考虑 Widget 初始化时的现有类。
3. 创建一个 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
})

这样您就添加了 enum 属性，该属性目前不执行任何操作。

2。如果widget已经有其中一个类，则设置property属性值(initialValue)

为了检索可以在 DOM 中分配的小部件的初始值，我们定义了 defaultValueCallback 函数，它位于 defaultValue 之后的属性属性中>:

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

并添加_changeShadowDepth函数，如下所示:

_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);
  }
},

这与官方Image widget使用的方法完全相同。更改对齐(背景对齐)属性。