Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

初探 Polymer 1.0 之 基本数据绑定

  很多现代前端框架都支持数据绑定,Polymer 也不例外。但比起 Angular 之类的框架来,Polymer 的数据绑定就没那么灵活了。但这「不灵活」绝对不是缺点!反而是一种优点!我对 Angular 那恶心的自定义表达式以及更加恶心的脏数据比对早就绝望透了。
  把数据绑定到模板中可以在模板中放入数据占位符。在 Polymer 中这些占位符必须是元素的直接内容(附近不能有文本节点)或直接属性。这些占位符会被解析并以访问器的形式定义到 VM 层上。之后只要对 VM 层的这些属性赋值则可以改变 View 上的显示。下面是演示 <script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-hello">
  <style>
    :host { color: red; }
  </style>
  <template>
    <h1>[[prop1]]</h1>
    <h2 title="[[prop2]]">[[prop2]]</h2>
    <h3>{{prop3}}</h3>
  </template>
  <script>
    Polymer({
      is: 'demo-hello',
      properties: {
        prop2: { value: 'prop2' },
      },
      ready: function() {
        this.prop1 = 'prop1';
      }
    });
  </script>
</dom-module>

<demo-hello prop3="prop3"></demo-hello>

  上面的代码演示了几种基本的数据提供方式,首先元素本身就是 VM 层,上面的属性可以被传入。也可以在定义时设置 properties,逐个添加属性(这个方式设置还有很多其他用途,具体看官方文档,我懒得说)。ready 方法会在初始化完成后执行,里面的 this 也是元素本身(VM 层),所以添加数据也可以绑定到元素上。
  模板中的数据占位符可以使用中括号或大括号,它们的区别是单向绑定和双向绑定。下面这个示例就可以看出它们的区别 <script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-inner">
  <script>
    Polymer({
      is: 'demo-inner',
      properties: {
        x: { notify: true },
        y: { notify: true }
      },
      ready: function() {
        // 此时修改 x 的值不会改变 demo-outer 的 v1 值(因为中括号单向绑定)
        this.x = 'abc';
        // 此时修改 y 的值会改变 demo-outer 的 v2 值(因为大括号双向绑定)
        this.y = 'def';
        // 由于渲染是异步的,所以下面代码必须在异步回调中才会生效
        this.async(function() {
          var outer = document.querySelector('demo-outer');
          console.log(outer.v1);
          console.log(outer.v2);
        });
      }
    });
  </script>
</dom-module>

<dom-module id="demo-outer">
  <template>
    <demo-inner x="[[v1]]" y="{{v2}}"></demo-inner>
  </template>
  <script>
    Polymer({ is: 'demo-outer' });
  </script>
</dom-module>

<demo-outer></demo-outer>
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^