2方式与textarea ractive js绑定

Question

我目前面临 2 个问题，我是 Ractive js 的新手
1) 当我使用 type="text/ractive" 并尝试将 ckeditor 用于我的 textarea 时，它没有显示，如果我删除 type="text/ractive" 然后 ckeditor 正在显示，我该如何同时使用两者？

2) 我正在为textarea 使用双向绑定，这似乎工作正常，但是当textarea 替换为ckeditor textarea 插件双向绑定不起作用，因为ckeditor textarea 发生了变化，我认为它会根据某些事件更新值，因为我没有直接更改 textarea，它正在由 ckeditor 更新。

<script id="edit-template-quick" type="text/ractive">   
       // this is returning me the form
    drupal_render(drupal_get_form('xyz')); ?>
</script>

function xyz($form_id, $form_ids, $value) {  
  $form[$value] = array(
    '#type' => 'text_format',
    '#wysiwyg' => TRUE,
    '#attributes' => array(
      'value' => "{{ $value }}",
    ),
  );
  return $form;
}

    ractive = new Ractive({
       el: 'container-quick',
       template: '#edit-template-quick',

       data: {
                slides: json
       }
   });

Answer 1

1) 使用type=text/ractive 或type=text/html 的目的是防止浏览器尝试将内容解析为javascript。可用于提供模板：

<script id="edit-template-quick" type="text/ractive">   
    <p>hello {{place}}</p>
</script>

看起来您的意图是让服务器将 html 放入脚本标记中？我会检查浏览器以查看实际发送的内容，我怀疑它在某个地方失败了。如果您想要在浏览器中运行某个函数，请删除type 规范。

2) 你可以使用装饰器，但我认为组件更好地封装编辑器：

var CKEditor = Ractive.extend({
    template: '<textarea>{{{text}}}</textarea>',
    onrender() {
        var editor = this.editor = CKEDITOR.replace( this.find('textarea') );

        editor.on( 'change', evt => {
            this.set( 'text', evt.editor.getData() );
        });
    },
    onteardown() {
        this.editor.destroy();
    }
});

然后，假设您的设置中有类似 components: { 'ck-editor': CKEditor } 的内容，您可以通过以下方式使用它：

<pre>{{doc}}</pre><ck-editor text="{{doc}}"></ck-editor>

例如见http://jsfiddle.net/martypdx/jv15gjpr/