開坑，寫點Polymer 1.0 教程第2篇(下)——hello world篇

時間 2019-12-20

標籤 polymer1.0 polymer 教程 hello world 简体版

原文原文鏈接

書接上回，上回叔說到如何註冊（建立）一個自定義組件，這回咱們來說講它的數據綁定。html

使用數據綁定

固然，你可能不會僅僅知足上文教的簡單的靜態自定義組件，你一般須要動態的更新你的dom組件。web

數據綁定是一個很是屌的的辦法能讓你快速的傳播組件的變化，減小代碼的行數。你能夠用雙大括弧{{}}來聲明你須要綁定的屬性，大括弧在運行時會被替換成括弧內的屬性值。segmentfault

name-tag.htmlapi

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

<dom-module id="name-tag">

  <template>
    <!-- bind to the "owner" property -->
    This is <b>{{owner}}</b>'s name-tag element.
  </template>

  <script>
  Polymer({
    is: "name-tag",
    ready: function() {
      // set this element's owner property
      this.owner = "Daniel";
    }
  });
  </script>
  
</dom-module>

index.htmldom

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="name-tag.html">
  </head>
  <body>
    <name-tag></name-tag>
  </body>
</html>

運行結果
this

聲明properties

咱們能夠看到owner這一變量已經和<b/>標籤綁定在一塊兒了，可是這是在組件ready階段纔給owner賦的值，下面會介紹另一種定義綁定屬性的方式
定義——聲明properties屬性（如同聲明is屬性來定義自定義的組件的標籤名同樣）spa

properties是自定義組件公共api中很是重要的一個組成部分，你能夠經過它來定義默認值，配置標籤上的屬性值，也能夠用啦觀測屬性的變化等等雙向綁定

在接下去的例子中，咱們將聲明一個帶有默認值的owner屬性，並將index.html中對這個屬性進行賦值操做code

configurable-name-tag.htmlcomponent

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

<dom-module id="configurable-name-tag">

  <template>
    <!-- bind to the "owner" property -->
    This is <b>{{owner}}</b>'s configurable-name-tag element.
  </template>

  <script>
    Polymer({
      is: "configurable-name-tag",
      properties: {
        // declare the owner property
        owner: {
          type: String,
          value: "Daniel"  //默認值
        }
      }
    });
  </script>
  
</dom-module>

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="configurable-name-tag.html">
  </head>
  <body>
    <!-- configure a property from markup by setting
         the corresponding attribute                 -->
    <configurable-name-tag owner="Scott"></configurable-name-tag>
    <!--在這裏咱們隊owner進行了賦值，就像操做input的value同樣對其進行賦值-->
  </body>
</html>

雙向綁定

除了綁定文本（如上例，變量 -> 組件）之外，Polymer還支持雙向綁定
（變量 -> 組件 -> 組件change -> 變量）

edit-element.html

<dom-module id="edit-element">
    <template>
        <p>
            This is a <strong>{{owner}}</strong>'s edit-element.
        </p>
        <input value="{{owner::input}}" placeholder="Your name here...">
    </template>

    <script>
        Polymer({
            is: "edit-element",
            properties: {
                owner: {
                    type: String,
                    value: "Daniel"
                }
            }
        });
    </script>
</dom-module>

index.html

<!DOCTYPE html>
<html>

<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="edit-element.html">
</head>

<body>
    <edit-element></edit-element>
</body>

</html>

運行結果

Polymer是經過事件名的約定來實現雙向綁定的（關於數據綁定之後會開一張本身講），可是原生標籤一開始並不在Polymer的生態圈內，因此沒有遵循這一約定，所以對於原生標籤，咱們須要按照下面的格式來給它這是一個自定義的change事件聲明，格式以下

target-prop="{{hostProp::target-change-event}}"

舉個例子：
若是是對input type="text"的文本框進行雙向綁定，你就能夠這樣寫

<input type="text" value="{{owner::input}}"

或者

<input type="text" value="{{owner::change}}"

::符號後的都是事件名，二者區別是input事件每次按下鍵盤都會觸發雙向綁定的更新，而change事件只在光標失去焦點的時候觸發雙向綁定的更新。

本篇完，下篇還沒想好要寫啥。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。