[2.0-preview] dom-bind not working in preview

[ghost]

Using the Polymer v2.0.0-rc.2 with the iron-demo-helpers 2.0-preview, data binding within the template is not working.

This following used to work in Polymer v1.x:

<demo-snippet>
  <template is="dom-bind">
     <nebula-location data="{{location}}"></nebula-location>
     <p>Pathname: <b>[[location.pathname]]</b></p>
  </template>
</demo-snippet>

To get this to work now I have to add an additional dom-bind wrapper inside the demo-snippet:

<demo-snippet>
  <template>
    <dom-bind>
      <template>
        <nebula-location data="{{location}}"></nebula-location>
        <p>Pathname: <b>[[location.pathname]]</b></p>
      </template>
    </dom-bind>
  </template>
</demo-snippet>

But now the dom-bind wrapping is also shown in the clipboard preview area.

[masonlouchart]

Same issue with Polymer 2.0.1 and iron-demo-helpers 2.0.0.

[cecilia-sanare]

Changing the following function fixes the issue, but I suspect it may have some unforeseen consequences since I'm having to use querySelector directly.

<demo-snippet>
  <dom-bind>
    <template>
      <input type="checkbox" checked="{{opened::change}}">
      <input type="checkbox" checked="{{opened::change}}">
    </template>
  </dom-bind>
</demo-snippet>

demo-snippet.html

// ...
_updateMarkdown: function() {
  var template = Polymer.dom(this).queryDistributedElements('template')[0];

  // Attempt to find any child node that represents a template
  // This fixes utilizing dom-bind w/ a template
  if (!template) {
    template = Polymer.dom(this).querySelector('dom-bind > template, dom-repeat > template, dom-if > template');
  }

  // If there's no template, render empty code.
  if (!template) {
    this._markdown = '';
    return;
  }
  var is = template.is || template.parentElement.tagName.toLowerCase();
  var snippet = this.$.marked.unindent(template.innerHTML);
  // Boolean properties are displayed as checked="", so remove the ="" bit.
  snippet = snippet.replace(/=""/g, '');
  this._markdown = '```\n' + snippet + '\n' + '```';
  // Stamp the template.
  if (['dom-if', 'dom-bind', 'dom-repeat'].indexOf(is) === -1) {
    // Don't need to listen for more changes (since stamping the template
    // will trigger an observeNodes)
    Polymer.dom(this.$.content).unobserveNodes(this._observer);
    this._observer = null;
    Polymer.dom(this).appendChild(document.importNode(template.content, true));
  }
},
// ...

[heruan]

I'm experiencing this in demo-helpers v2.0.0. For example:

<demo-snippet>
  <template is="dom-bind">
     <paper-input value="{{value}}"></paper-input>
     <p>Value: <span>[[paper-input]]</span></p>
  </template>
</demo-snippet>

renders a blank snippet:

But if I remove is="dom-bind" the input appears, without binding of course.

Is it a bug or is it by design?

[masonlouchart]

Hi @heruan, adding dom-bind tags worked for me:

<demo-snippet>
  <template>
+  <dom-bind>
    <template is="dom-bind">
      <paper-input value="{{value}}"></paper-input>
      <p>Value: <span>[[paper-input]]</span></p>
    </template>
+  </dom-bind>
  </template>
</demo-snippet>

EDIT: after comment of @Stefdv

[SieBRUM]

Why is this still not fixed? After applying those fixed, the PREVIEW is rendered, but the code snippet is not..

[Stefdv]

I think @masonlouchart means

<demo-snippet>
  <template>
    <dom-bind>
      <template is="dom-bind">
          <paper-input value="{{value}}"></paper-input>
          <p>Value: <span>[[value]]</span></p>
      </template>
    </dom-bind>
   </template>
</demo-snippet>

That is an awfull lot off tags but at least it works ;p