On Wednesday, August 9, 2017 at 6:40:43 PM UTC+2, ssch...@gmail.com 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 polymer-dev+unsubscr...@googlegroups.com.
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.

Reply via email to