javascript - 用于观察的 polymer 代码示例片段不会更改文本颜色

Question

各位互联网界的好心人，大家好，

我正在尝试使用 polymer 示例片段，但似乎无法获得以下片段示例以使观察正常运行:

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

<polymer-element name="my-element">
   <template>
     <div>{{thing.color}}</div>
     <button on-tap="{{changeColor}}">Change color</button>
     <p>{{message}}</p>
   </template>
 <script>
    Polymer({
      message: '',
      created: function() {
        this.thing = {
          color: 'red'
        };
      },
      observe: {
        'thing.color': 'colorObserver',
      },
      colorObserver: function(oldValue, newValue) {
        this.message = 'Color changed from ' + oldValue + ' to ' + newValue;
      },
      changeColor: function(e) {
        this.thing.color = this.thing.color === 'red' ? 'green' : 'red';
      }
    });
  </script>
 </polymer-element>

...“红色”或“绿色”文本的颜色不会切换，但消息文本显示正常。

我遇到的这个小问题的特定 polymer 代码示例片段的链接如下: https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/observing-changes/watching-for-changes-to-a-nested-object.html

我在 Chrome 开发编辑器中使用示例代码片段模板，再次:网页按钮工作正常，并且显示文本正常，但可惜的是，文本颜色“红色”或“绿色”没有显示。我已经对组件包运行了 Bower Update，并且 JavaScript 控制台中没有错误。

注意:还有另一个 polymer 片段模板可以做一些非常相似的事情(切换文本颜色)，效果很好，链接在这里:

https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/basics/binding-to-a-style.html

<polymer-element name="my-element">
  <template>
    <p>My favorite color is <span style="color:{{color}}">{{color}}</span>.</p>
    <button on-tap="{{toggleColor}}">Toogle color</button>
  </template>
 <script>
  Polymer({
    color: 'red',
    toggleColor: function() {
      this.color = this.color === 'red' ? 'green' : 'red';
    }
  });
</script>

所以，在这一点上，我不确定我是否理解观察函数的工作原理，并且作为一个元问题:有人可以建议如何解决此类问题吗？或者向我指出可能有助于解决此类问题的资源？ (假设没有抛出明显的错误)。

提前致谢

Answer 1

那是因为您没有“实际上”将 thing.color 绑定(bind)到适当的 css 属性:

<div style="color: {{thing.color}}">{{thing.color}}</div>