On Wednesday, August 9, 2017 at 6:40:43 PM UTC+2, [email protected] wrote:
>
> hello, i am trying to send parameters to a polymer element and i just
> cannot find a working example on how to use data-* parameters properly.
>
> this is what i am trying:
>
>
> <?php
> $config = array();
> $config['search_ic'] = $params->get('search_input_class', '');
> $config['placeholder'] = $search;
> $config['myid'] = $myid;
> $keyword = $keyword = JRequest::getVar('keyword');
> $config['keyword'] = $keyword;
> $config['noajax'] = (bool)$no_ajax;
> $config['number_of_products'] = $params->get('number_of_products', '');
> $config['clang'] = $clang;
> $config['url'] = $url;
> $config['order_by'] = $params->get('order_by');
> ?>
>
> <ajaxsearch-app data-params="<?php echo
> htmlentities(json_encode($params)); ?>"/><ajaxsearch-app>
>
> and within the element definition (ajaxsearch-app.html):
>
> <link rel="import"
> href="../../bower_components/polymer/polymer-element.html">
> <dom-module id="ajaxsearch-app">
>
>
> <dom-module id="ajaxsearch-app">
> <template>
> <style>
> </style>
>
> <input placeholder="[[dataParams.placeholder]]"
> class="inputbox_vm_ajax_search_search_str2 span2 inactive_search "
> id="vm_ajax_search_search_str2[[dataset.myid]]" name="keyword"
> type="search" value="[[dataset.keyword]]" autocomplete="off"
> onblur="javascript: return search_setText('', this,
> '[[dataset.myid]]');" onfocus="javascript: aj_inputclear(this,
> '[[dataset.number_of_products]]', '[[dataset.clang]]', '[[dataset.myid]]',
> '[[dataset.url]]');" onkeyup="javascript:search_vm_ajax_live(this,
> '[[dataset.number_of_products]]', '[[dataset.clang]]', '[[dataset.myid]]',
> '[[dataset.url]]', '[[dataset.order_by']]); " />
>
> </template>
>
> <script>
> /**
> * @customElement
> * @polymer
> */
> class AjaxsearchApp extends Polymer.Element {
> ready() {
> super.ready();
> this.addEventListener('keypress', e => this.handlePress(e));
> }
> handlePress(e) {
> console.log('press');
> }
> static get is() { return 'ajaxsearch-app'; }
> static get ready() {
> console.log('ready');
> }
> static get properties() {
> return {
> prop1: {
> type: String,
> value: 'ajaxsearch-app'
> },
> params: {
> type: Object,
> value: {}
> },
> };
> }
> }
>
> window.customElements.define(AjaxsearchApp.is, AjaxsearchApp);
> </script>
> </dom-module>
>
>
> can anyone point me to a documentation or provide a full example of the
> element definition and element usage which got both "data-*" definition and
> also uses the parameters within the html of the element ? any search in
> google for polymer2 ends up at polymer 1 and clicking absolete api link
> points to a frontpage instead of the same topic in the documentation. the
> documentation only provides partial examples and thus it's not possible to
> understand the whole picture.
>
> my goal is to use polymer as compatiblity library for shadow dom usage.
>
> any advise is appreciated,
> thank you very much.
>
> stan
>
ok, i am replying to myself as a bit of debugging did this and if any
newbie comes here it will be much easier to find out:
<dom-module id="ajaxsearch-app">
<template>
<style>
</style>
<input placeholder="[[params.placeholder]]"
class="inputbox_vm_ajax_search_search_str2 span2 inactive_search "
id="vm_ajax_search_search_str2[[params.myid]]" name="keyword" type="search"
value="[[params.keyword]]" autocomplete="off" />
</template>
<script>
/**
* @customElement
* @polymer
*/
class AjaxsearchApp extends Polymer.Element {
ready() {
super.ready();
this.addEventListener('keyup', e => this.handlePress(e));
this.addEventListener('focus', e => this.handOnFocus(e));
console.log('ready');
console.log(this.params);
}
handlePress(e) {
search_vm_ajax_live(this, this.params.number_of_products,
this.params.clang, this.params.myid, this.params.url, this.params.order_by)
}
handOnFocus(e) {
search_vm_ajax_live(this, this.params.number_of_products,
this.params.clang, this.params.myid, this.params.url, this.params.order_by)
}
static get is() { return 'ajaxsearch-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'ajaxsearch-app'
},
params: {
type: Object,
value: {}
},
};
}
}
window.customElements.define(AjaxsearchApp.is, AjaxsearchApp);
</script>
</dom-module>
if there is a more minimalistic approach i will be glad to learn more.
best regards, stan
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/1dbdd3ae-73a4-4dcb-bcd7-03728b0010f2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
