获取代码镜像元素的值

Question

我正在使用Polymer Designer中的代码镜像组件，可以设置初始值，但看不到如何从用户那里获得对代码的更改。

我使用初始化代码镜像

<code-mirror id="code_mirror" value="{{code}}">

</code-mirror>

并且希望侦听｛｛code｝｝中的更改，但codeChanged似乎未启动。

我知道我可以使用code_mirror.$获得实际值。mirror.getValue（），但希望使用数据绑定。

我试着用零钱，但没有用。

Answer 1

假设您使用https://github.com/PolymerLabs/code-mirror您需要做的是使在ready中创建的CodeMirror实例处理实例本身正在发出的一些事件，然后使code-mirror元素激发任何自定义事件（我知道它被称为事件中继）

以下示例使聚合物元素在编辑器值更改时激发自定义事件code-change

ready: function() {
    var me = this;
    //...
    this.mirror = CodeMirror(this.shadowRoot, { /* ... */ });
    this.mirror.on('change', function () {
        // me = polymer instance
        me.fire('code-change', { value: me.mirror.getValue() })
    });
}

然后，聚合物自定义元素的任何实例都需要使用polymer的声明性事件映射或通过addEventListener 来侦听该事件

第一种情况（如果code-mirror在另一个<polymer-element />内）：

<code-mirror on-code-change="{{ onCodeChange }}"></code-mirror>
// ...
<script>
Polymer({
  onCodeChange: function(event, detail, sender) { ... }
});
</script>

第二种情况（）：

<code-mirror></code-mirror>
<script>
   document
       .querySelector('code-mirror')
       .addEventListener('code-change', function () { ... });
</script>