1

Wakanda でカスタム ウィジェットを作成しています。

このウィジェットは、プロパティの関数でクラスを変更する必要があります。たとえば、プロパティが shadowDepth=2 の場合、クラスを として設定しmdl-shadow--2dpます。それ以外の場合、shadowDepth=6 の場合、クラスを mdl-shadow--6dp として設定します。

このようにクラスを変更するにはどうすればよいですか？

4

1 に答える 1

0

最もよく使用されるアプローチは次のとおりです。

  1. enumカスタム ウィジェットに属性を追加します。
  2. ウィジェットの初期化時に既存のクラスを検討してください。
  3. onChange希望するクラスを適用するトリガーを作成します。

各ステップを個別に見てみましょう。

1. enum カスタム属性を追加する

カスタム ウィジェットの作成方法をご存じでしょうか。のウィジェット定義に属性を追加しましょう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);
  }
},

これは、公式の画像ウィジェットが align (background-align) プロパティを変更するために使用するアプローチとまったく同じです。

于 2016-08-22T09:16:24.900 に答える