Question

我有一个带有模型对象的元素，我想这样观察：

<polymer-element name="note-editor" attributes="noteTitle noteText noteSlug">
  <template>
    <input type="text" value="{{ model.title }}">
    <textarea value="{{ model.text }}"></textarea>
    <note-ajax-button url="/api/notes/" method="POST" model="{{model}}">Create</note-ajax-button>
  </template>

  <script>
    Polymer('note-editor', {
      attached: function() {
        this.model = {
          title: this.noteTitle,
          text: this.noteText,
          slug: this.noteSlug
        }
      },
    });
  </script>
</polymer-element>

我想观察模型中的变化，但显然不可能在元素中使用modelChanged回调，也不能在note-ajax-button元素中使用。怎么了？我怎么能这样做？

我已经尝试过单独观察这些字段，但它根本不干净。您在那里看到的按钮元素的状态应该根据模型状态而改变，因此我需要观察对象的更改，而不是属性。谢谢！

Answer 1

要观察对象中的路径，您需要使用observe块：

Polymer('x-element', {
  observe: {
    'model.title': 'modelUpdated',
    'model.text': 'modelUpdated',
    'model.slug': 'modelUpdated'
  },
  ready: function() {
    this.model = {
      title: this.noteTitle,
      text: this.noteText,
      slug: this.noteSlug
    };
  },
  modelUpdated: function(oldValue, newValue) {
    var value = Path.get('model.title').getValueFrom(this);
    // newValue == value == this.model.title
  }
});

http://www.polymer-project.org/docs/polymer/polymer.html#observeblock

Answer 2

或者您可以为模型添加一个额外的属性，例如'refresh'（布尔值），每次修改某些内部值时，只需设置refresh =！refresh即可修改它，然后您只能观察一个属性而不是很多。当您的模型包含多个嵌套属性时，这是一个很好的例子。

Polymer('x-element', {
  observe: {
    'model.refresh': 'modelUpdated'
  },
  ready: function() {
    this.model = {
      title: this.noteTitle,
      text: this.noteText,
      slug: this.noteSlug,
      refresh: false
    };
  },
  modelUpdated: function(oldValue, newValue) {
    var value = Path.get('model.title').getValueFrom(this);
  },
  buttonClicked: function(e) {
    this.model.title = 'Title';
    this.model.text = 'Text';
    this.model.slug = 'Slug';
    this.model.refresh = !this.model.refresh;
  }
});

Answer 3

我在这种情况下做的是使用* char来观察我的数组中的任何属性更改，这里是我的JSON对象的一个示例：

{
    "config": { 
        "myProperty":"configuraiont1",
        "options": [{"image": "" }, { "image": ""}]
     }
};

我创建了一个方法 _myFunctionChanged ，然后我作为参数 config.options。* 传递，然后在数组选项中的每个属性都被观察到function _myFunctionChanged

Polymer({ 
 observers: ['_myFunctionChanged(config.options.*)'] 
});

您可以使用与对象相同的模式，而不是使用像 config.options。 这样的数组，您只需观察 config。< /强> 的

观察Polymer JS中对象的更改

3 个答案: