2路有約束力的textarea ractive JS

我目前所面臨2的問題，我是新來Ractive JS
1）由於我使用type="text/ractive"，並試圖用的CKEditor我textarea，這是不顯示，如果我刪除type="text/ractive"然後ckeditor顯示，我怎麼能使用兩個？
2路有約束力的textarea ractive JS

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 
     } 
    });

來源

2016-04-28 mks

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/

來源

2016-04-28 15:28:11 martypdx

感謝您的快速回復，在第二個方案中的問題是'Ractive組件的雙向binding'，textarea的是獲得upda因爲我可以看到更改，但是值不具有約束力，我認爲它只會綁定在textarea上的某種事件上，比如'change'或'on'。 – mks

>數值沒有約束力 - 不確定我關注，你能舉個例子嗎？ – martypdx

我正在嘗試雙向綁定'textarea' http://docs.ractivejs.org/latest/two-way-binding，但它沒有綁定，因爲它嵌入了ckeditor。 – mks

2路有約束力的textarea ractive JS

回答

相關問題