CODEWITHSUNDEEP
polymer
SuperUberDuper
SuperUberDuper

Reputation: 9623

Value not bound to input in template

For some reason my inputs are blank when binding to my published properties. Any ideas what I need to do? Also do I have to use publish probs to bind to internal templates.

<polymer-element name="my-foo.html" noscript>

  <script>

    Polymer('my-element', {

      publish: {

              test: 1,
              foo : {
                baa: 1.000
              }
              },
      // Fires when an instance of the element is created
      created: function () {
      },

    });
  </script>
  <template>
    <form>
        <input  value="{{test}}">
        <input  value="{{foo.baa}}">

    </form>
    <button>Submit</button>
  </template>
</polymer-element>

Upvotes: 0

Views: 145

Answers (1)

Alexander Weber
Alexander Weber

Reputation: 799

There are couple of issues with your code:

  1. Do not use noscript attribute in this case. noscript can only be used, if you are leaving the Polymer constructor blank (so you could leave out the <script> part, while your element still would be registered). But this is obviously not the case here, so leave out this attribute.
  2. Your name attribute should be my-foo. The extension .html is not necessary.
  3. While calling the Polymer constructor, you need to provide the same name as in name attribute of your polymer element. So here instead of my-element you need to write my-foo. Or you could place the constructor after the <template> block. Then it is not necessary to provide any name.

Here is the jsfiddle and snipped of your corrected code:

http://jsfiddle.net/kreide/knzjhjyd/

<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    
<polymer-element name="my-foo">
    <script>
        Polymer('my-foo', {
            publish: {
                test: 1,
                foo: {
                    baa: 1.000
                }
            },
            // Fires when an instance of the element is created
            created: function() {}
        });
    </script>
    <template>
        <form>
            <input value="{{test}}">
            <input value="{{foo.baa}}">
        </form>
        <button>Submit</button>
    </template>
</polymer-element>
<my-foo></my-foo>

Upvotes: 2

Related Questions