Polymer 1.0: Есть ли способ передать аргумент функции Polymer из атрибута?

Есть ли способ передать аргумент функции Polymer из атрибута элемента внутри его <template>?

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="#" onclick="location.href='http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html'; return false;" />
<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>

Фоновые исследования

Я прочесал документацию, в которой говорится об этом. Он не говорит, можете ли вы или не можете. Но когда я пытаюсь, он терпит неудачу. Но, возможно, я не делаю это правильно. Поэтому мне нужна помощь.

Единственное, с чем я столкнулся, это прослушиватели событий, которые, похоже, не могут принимать аргументы, которые я хочу передать. Скажем, id или name.

Предыдущие попытки

Я пробовал (безуспешно) делать такие вещи, как:

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

но ничего не работает.

Идея прослушивателей событий не работает, потому что они ограничивают аргументы, и я не могу получить, скажем, id мне нужно.

Ответы

Ответ 1

Вместо этого вы можете использовать атрибуты данных 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>

Ответ 2

После многого поиска я нашел то, что я считаю самым чистым решением.

Если кнопка бумаги находится внутри шаблона, например

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

Ответ 3

Сияющий больше света на тонкой разнице, упомянутой в комментариях выше.

Обратите внимание, что $= должно использоваться при чтении привязки данных.

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

Ответ 4

Есть ли способ передать аргумент функции Polymer из атрибута элемента внутри его <template>.

Вместо использования события используйте вычисленную привязку. Вычислимые привязки могут принимать строковые строки.

Ознакомьтесь с приведенным ниже рабочим примером. В этом примере кнопка может быть скрыта на основе передаваемого параметра.

<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>

Ответ 5

Попробовав предлагаемые здесь решения, в которых ни одна из них не работала, я немного изменил решения @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>

Ответ 6

Как раз сейчас я получил это для работы:

<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>

Ответ 7

Возможно, наиболее надежный способ получения аргумента выглядит следующим образом:

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

Ответ 8

В зависимости от ситуации чистый способ сделать это обычно использует dom-repeat. Если вы можете отформатировать свои данные в виде массива объектов, вы можете просто использовать e.model для получения всего.