PolymerElements/iron-demo-helpers

Setting default data to template[is="dom-bind"]

Opened this issue · 3 comments

tpluscode commented

Description

It is possible to use data binding in the demo-snippet template but there is no simple way for setting initially bound values.

Expected outcome

Setting up data binding without resorting to document.querySelector etc. to select the <template> instance. Also, it would be nice to then display the bound data in marked-element along the demoed element(s). Here's how I imagine the usage

<demo-snippet>
  <template id="defaultBinding" is="dom-bind">
    <paper-input value="{{data.someText}}"></paper-input>
    <paper-input value="{{data.someText}}"></paper-input>
  </template>

  <script>
    function defaultBinding() {
      return {
        someText: 'Lorem Ipsum Dolor'
      }
    }
  </script>
</demo-snippet>

For lack of a better idea, I assume that there has to be a global function named same as the snippet's template. If so, then the data returned from this function will be assigned to template.data property. Alternatively, I'm considering iterating the keys of the object and setting on the template so that it won't be necessary to prefix everything with data.

Also, I that in addition to a function, a variable could be set up in the script like window.defaultBinding = {}

I'm also not too keen on the idea of global function/variable. I'd like to hear any suggestions.

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10
notwaldorf commented

I think I'm a little confused...why can't you just set the property on the template? i.e. defaultBinding.data = {...}? This is how a dom-bind would be used regardless of a demo-snippet.

Secondly, if that doesn't work, you can just put the dom-bind outside of the demo-snippet, and set the data on it as above:

<template is="dom-bind" id="scope">
  <demo-snippet>
    <template>[[scope.someText]]</template>
  </demo-snippet>
</template>
<script>
  scope.someText = 'meow'
</script>
tpluscode commented

Setting the value is easy. What I wanted more is actually showcasing the values. See the screenshot in my PR. I added an additional marked-element which renders the dom-bind's model.

aemonge commented

How would this work with polymer 2 ?

      <demo-snippet>
        <template id="scope">
          <dom-bind id="scope">
            <template id="scope">
              La [[scope.hola]] caracola

              <script>
                /* eslint-disable */
                scope = {
                  hola: 'hola jesus'
                };
              </script>
            </template>
            <script>
              /* eslint-disable */
              scope = {
                hola: 'hola mundo'
              };
            </script>
          </dom-bind>
          <script>
            /* eslint-disable */
            scope = {
              hola: 'hola niá'
            };
          </script>
        </template>
        <script>
          /* eslint-disable */
          scope = {
            hola: 'hola guero'
          };
        </script>
      </demo-snippet>
  • 👍2