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

Question

我在Wakanda创建自定义小部件。

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

我怎么能这样改变课程？

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。如果窗口小部件已经有其中一个类，请设置属性属性值（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用于更改对齐（背景对齐）属性的方法完全相同。