

お世話になっております。

現在Polymerを使用しWeb開発を行っているのですが、データバインディングでデータがバインドされない現象に遭遇したので質問させていただきます。

[code]

    <dom-module id="test-info-component">
      <template>
        <div>
          <p>{{title}}</p> <!--ここにtitleプロパティの値を反映したい -->
        </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); // 反映されている。
          }
        });
      </script> 
    </dom-module>
    
[/code]

としているのですが、動的に作成した場合、

[code]

    var info = new TestInfo("タイトル");
    Polymer.dom(hoge).appendChild(info);
    
[/code]

としてもタイトルと日本語文字列が反映されず、デフォルト値のtitleと表示されてしまいます。  
`TestInfo`自体は表示されているようですが、`factoryImpl`で渡した値がデータがバインド  
されない状態です。  
`factoryImpl`内では`this.title`に値が反映されているのですが、`{{title}}`に反映されないようです。  
どのような原因があるのでしょうか？  
宜しくお願い致します。


CC BY-SA 3.0
2015-09-24T07:05:35.613
16894
2019-12-14T21:16:27.067
2015-09-25T04:57:06.660
10492
297
question
html polymer web-component
Polymerのデータバインディングについて


こちらを参考にしてください

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

[code]

    <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="タイトル"></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); // 反映されている。
          }
        });
        var info = new TestInfo("タイトル");
        document.body.appendChild(info);
      </script>
    </body>
    
    </html>
[/code]

`Polymer({})`の戻り値は、`document.registerElement`が済んだ状態のHTMLElementです。これは単なるコンストラクタであるため、`new
TestInfo()`でインスタンス化してもすでにDOM上にある要素には関係がありません。

`new TestInfo()`の戻り値は`document.createElement("test-
info")`と同じですので、`document.body.appendChild`などでDOMに追加してあげなければ表示されません。


CC BY-SA 4.0
2015-09-24T09:34:14.500
16899
2019-12-14T21:16:27.067
2019-12-14T21:16:27.067
32986
4635
16894
answer