5

私はPolymerを学び始めたばかりです。これが私のポリマー要素の一般的なバージョンです:

<polymer-element name="my-element">
    <template>
        <style>
        :host {
            position:absolute;
            width: 200px;
            height: 100px;
            background-color: green;
        }
        </style>
        <p>my element</p>
        <content id="first-in"></content>
        <content id="second-in"></content>
    </template>
    <script>
    Polymer('my-element', {
        domReady: function() {
            alert(this.children[0].getAttribute('title')); 
            //this returns the value I want to observe
        }
    });
    </script>
<polymer-element>

コンテンツ タグは両方とも別のカスタム要素で満たされています (これも少し簡略化されています)。

<polymer-element name="in-element" attributes="title">
    <template>
        <style>
        ...
        </style>
        <p>{{title}}</p>
    </template>
    <script>
    Polymer('in-element', {
        title: 'me'
    });
    </script>
<polymer-element>

私ができるようにしたいのは、（任意の）要素内（コンテンツタグに入れられた）のタイトル属性が（クリックイベントなどによって）変更されたときに、 my-element で関数を呼び出すことです。観察を使用してこれにアクセスする方法や、mutationObserver などを使用する必要があるかどうかはわかりません。これはどのように行われますか/可能ですか?

4

2 に答える 2

8

のようなネイティブ プロパティtitleは、Polymer のデータ バインディング システムでは観察できません (例: Object.observe()[ info ])。一般的には、それらを避けることをお勧めします。

あなたの例では、プロパティ値が属性に反映されるように変更titleしmytitleて公開しました。このようにして、要素内をreflect: true完全に回避.getAttribute()してチェックすることができます。バインディングに.mytitleも使用できます。{{mytitle}}

これは、ミューテーション オブザーバー [ 1 ] を通じて行うことができます。Polymer はonMutation子の監視を提供しますが、子の属性を監視したい場合。そのためには、純粋な MO が必要です。

ready: function() {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
      if (m.target.localName == 'in-element') { // only care about in-element
        console.log(m.attributeName, m.oldValue, m.target.mytitle);
      }
    });  
  });
  // Observe attribute changes to child elements
  observer.observe(this, {
    attributes: true,
    subtree: true,
    attributeOldValue: true
  }); 
}

デモ: http://jsbin.com/doxafewo/1/edit

ではdomReady()、アラートも に変更this.children[0]しましたthis.$.firstin.getDistributedNodes()[0].mytitle。実際に挿入ポイントgetDistributedNodes()を通過しているノードがあることが保証されるため、使用する方が優れています [ 2 ]。<content>

于 2014-07-11T15:13:21.937 に答える
-1

属性ごとにウォッチャーがあります。したがって、あなたの場合、このように見えるはずです。2 つの異なる実装がありますが、1 つは関数の最初の引数として属性名を持ちます。

Polymer('in-element', {
    title: 'me',
    titleChanged: function(oldVal, newVal) {
        // do something
    }
});

ポリマー変更ウォッチャー

于 2014-07-11T14:48:59.463 に答える