web-dev-qa-db-ja.com

Polymer 1.0：属性から引数をPolymer関数に渡す方法？

<template>内の要素属性からPolymer関数に引数を渡す方法はありますか？

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<dom-module id="example-element">
  <template>
    ...
    <paper-button id="foo" on-tap="bar">Click</paper-button>
    ...
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'example-element',
      properties: {...},
      bar: function(arg){
        // Do stuff using argument arg
      }
    });
  })();
</script>

背景調査

私は ドキュメント をくまなく調べましたが、これはこの問題について沈黙しているように見えます。あなたができるかできないかはわかりません。しかし、試してみると失敗します。しかし、多分私はそれを正しくやっていない。だから私はいくつかの支援が必要です。

私が遭遇した唯一のものは event listeners であり、これは私が渡したい引数を取ることができないようです。 idまたはnameと言います。

以前の試み

私は（失敗して）次のようなことを試みました：

<paper-button id="foo" on-tap="bar('foo')"> Click </paper-button>

しかし、何も機能していないようです。

イベントリスナのアイデアは、引数を制限するため機能しません。たとえば、必要なidを取得できません。

polymerpolymer-1.0
38
Mowzer

代わりにHTML5データ属性を利用できます。このようにしてみてください：

<paper-button id="foo" on-tap="bar" data-args="foo,some other value,2">Click</paper-button>
...
<script>
(function() {
  Polymer({
    is: 'example',
    properties: {...},
    bar: function(e){
      var args = e.target.getAttribute('data-args').split(',');
      // now args = ['foo', 'some other value', '2']
    }
  });
})();
</script>
46
Amit

たくさん検索した後、私は、考えられる最もクリーンなソリューションを見つけました。

紙ボタンがテンプレート内にある場合、例えば.

<template is="dom-repeat" items="{{allItems}}" as="item">
 <paper-button on-tap="itemTapped">[[item.text]]</paper-button>
</template>

その後、プロパティにアクセスするには、関数に渡されるイベントオブジェクトの「model」プロパティを使用します。

itemTapped: function(oEvent){
// oEvent.model.get is the getter for all properties of "item" in your bound array
console.log(oEvent.model.get('item.task'));
}
44
Vaibhav Arora

上記のコメントで言及された微妙な違いにさらに光を当てます。

通知$=は、データバインディングを読み取る場合に使用する必要があります。

<paper-button on-tap="_handleTap" data-foo="foo" data-bar$="[[bar]]">Tap</paper-button>

...

_handleTap: function(e) {
  var foo = e.target.dataset.foo;
  var bar = e.target.dataset.bar;
}

内部dom-repeat、item（または指定した名前）はe.model.item。

<template is="dom-repeat" items="[[items]]" as="someItem">
  <paper-button on-tap="_handleTap">Tap</paper-button>
</template>

...

_handleTap: function(e) {
  var item = e.model.someItem;
}
9
Jacob Phillips

<template>内の要素の属性からPolymer関数に引数を渡す方法はありますか？.

eventを使用する代わりに、計算されたバインディング。計算バインディングはリテラル文字列を受け入れることができます。

以下の作業例を確認してください。この例では、渡されたパラメーターに基づいてボタンを非表示にできます。

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<dom-module id="example-element">
        <template>
                <button id="foo-one" on-tap="barEvent">Click foo-one</button>
                <button id="foo-two" hidden="{{barTest('value-two')}}">Click foo-two</button>
                <button id="foo-three" hidden="{{barTest('value-three')}}">Click foo-three</button>
        </template>
</dom-module>
<script>
        Polymer({
                is: "example-element",
                barEvent: function (event) {
                        console.log(event.target.id);
                },
                barTest: function (arg) {
                        if (arg === "value-two") {
                                return true;
                        } else {
                                return false;
                        }
                }
        });
</script>

<example-element></example-element>

注：idまたはevent.targetを介してイベントが実行される要素のその他の属性を取得できます。パラメーターとして他の属性のみを探している場合、これも有効な解決策である可能性があります。

2
coderfin

ここで提案された解決策を試してみましたが、どれも機能しませんでしたが、@ Amitおよび@Mowzerの解決策を少し変更して、次のように機能するようにしました。

<dom-module id="dial-buttons">

    <template>
        <div on-click="handleClick" data-args="0, num-input">
            <p>0</p>
            <paper-ripple></paper-ripple>
        </div>
    </template>

    <script>
        Polymer({
            is: 'dial-buttons',
            properties: { ... },
            handleClick: function(e) {
                var args = Polymer.dom(e).path[1].getAttribute('data-args').split(',');
                alert(args[0] + args[1]);
            }
        });
    </script>

</dom-module>
1
Waleed Asender

おそらく、引数を取得する最も堅牢な方法は次のとおりです。

<paper-button on-tap="_getArgs"
              data-args="foo,bar,qux">Click</paper-button>
...
_getArgs: function(e) {
  var args = Polymer.dom(e).rootTarget.getAttribute('data-args');
  ...
}
0
Mowzer

ちょうど今、私はこれを機能させました：

<paper-button id="foo" on-tap="bar" data-args="baz,qux,quux">Click</paper-button>
...
<script>
(function() {
  Polymer({
    is: 'example',
    properties: {...},
    bar: function(e){
      var args = e.target.dataset.args.split(','); // ['baz', 'qux', 'quux']
    }
  });
})();
</script>
0
Mowzer

状況に応じて、これを行うためのクリーンな方法は通常 dom-repeat を使用します。データをオブジェクトの配列としてフォーマットできる場合は、e.modelを使用してすべてを取得できます。

0
mullens