Question

如果我使用dom-bind，如何观察属性更改？属性的更改在大括号内更新，因此我假设有一些与更改相关的事件，但我不知道它的名称。

示例：

<!doctype html>
<html lang="">
<head >
  <link rel="import" href="bower_components/polymer/polymer.html">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <style>
  </style>
</head>

<body>
<template is="dom-bind" id="app2">
  <p>test: <span>{{test}}</span></p>
  <input type="button" value="Change" on-click="chTest">
</template>
<script>
  (function (document) {
    'use strict';
    var app = document.querySelector('#app2');
    app.test = "original value";

    app.addEventListener('test-changed', function () {
      console.log('change listener fired');
    });
    app.addEventListener('dom-change', function () {
      console.log("dom-change");
    });
    app.chTest = function () {
      console.log('click');
      app.test = "new value";
// notifyPath-setter will fire "test-changed"-event
//      app.notifyPath("test", "notify value");
    };
  })(document);
</script>
</body>
</html>

编辑：有必要澄清我的问题：当app.test发生变化时，我想调用一些函数。

Answer 1

你的答案已被注释掉了。注释app.test行并取消注释app.notifyPath

//      app.test = "new value";
// notifyPath-setter will fire "test-changed"-event
      app.notifyPath("test", "notify value");

在下面工作jsbin：

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

编辑：一种解决方法是双向绑定到子元素并监听其更改。我已经更新了jsbin。

如何使用dom-bind观察属性更改

1 个答案: