1

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

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

<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>

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

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

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

1 件の回答 1

2

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

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="タイトル"></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>

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

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

1
  • さっそくのコメントありがとうございます。 一部情報が不足しておりましたので追加させていただきました。 TestInfo自体は生成され、表示されているのですが、factoryImplに渡した値がバインドされていない状態になっております。 情報不足、申し訳ありませんでした。
    – chonbo
    Commented 2015年9月24日 12:03

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。