如何使用 dom-bind 观察属性变化

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 观察属性变化

How to observe property changes with dom-bind

polymer

polymer-1.0

如何使用 dom-bind 观察 属性 变化

How to observe property changes with dom-bind

polymer

polymer-1.0

如何使用 dom-bind 观察属性变化