Understanding Polymer Data Bindings

Thank you for your help.

I am currently developing the web using Polymer, but I have encountered a phenomenon where data binding does not bind.

<dom-module id="test-info-component">
  <template>
    <div>
      <p>{{title}}</p><! -- I want to reflect the value of the title property here -->
    </div>
  </template> 
  <style>
  </style>
  <script>
    TestInfo=Polymer({
      is: "test-info-component",
      properties: {
        title: {
          type —String, 
          value: "title"
        }
      },
      factoryImpl:function(title){
        This.title=title;
        console.log("title="+this.title);// reflected.
      }
    });
  </script> 
</dom-module>

However, if you create it dynamically,

var info=new TestInfo("Title");
Polymer.dom(hoge).appendChild(info);

However, the title and Japanese string are not reflected, and the default value of title is displayed.
TestInfo itself appears, but the value passed in factoryImpl binds the data
It's not done.
In factoryImpl, this.title reflects the value, but it does not appear to reflect {{title}}.
What are the causes?
Thank you for your cooperation.

html polymer web-component

2022-09-30 20:25

1 Answers

Please refer to this

http://jsbin.com/cosinanoxo/1/edit?html,console,output

<html>

<head>
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <base href="http://polygit.org/polymer+:master/components/">

  <link href="polymer/polymer.html"rel="import">


  <link rel="import" href="iron-input/iron-input.html">
  <link rel="import" href="paper-tooltip/paper-tooltip.html">
</head>

<body>
  <test-info></test-info>
  <test-info title="Title">/test-info>
  <dom-module id="test-info">
    <template>
        <div>
          <p>{{title}}</p>
        </div>
      </template>
  </dom-module>
  <script>
    TestInfo=Polymer({
      is: "test-info",
      properties: {
        title: {
          type —String,
          value: "title"
        }
      },
      factoryImpl:function(title){
        This.title=title;
        console.log("title="+this.title);// reflected.
      }
    });
    var info = new TestInfo("Title");
    document.body.appendChild(info);
  </script>
</body>

</html>

The Polymer({}) return value is HTMLElement with document.registerElement completed.This is just a constructor, so it doesn't matter if you instantiate it with new TestInfo() to the elements that are already on the DOM.

The new TestInfo() return value is the same as document.createElement("test-info"), so you have to add it to the DOM in document.body.appendChild.

2022-09-30 20:25

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656