Нокаут связывания и CK инструментов Редактор не отображается

Question

Я совершенно новой для выбивания пользовательские привязки, я пытаюсь интегрировать CKEditor с выбыванием выжидать, я следующее связывание получил от поиска Google,

ko.bindingHandlers.wysiwyg = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
      var value = valueAccessor(); 
      var valueUnwrapped = ko.unwrap(value); 
      var allBindings = allBindingsAccessor(); 
      var $element = $(element); 


      $element.attr('contenteditable', true); 
      if (ko.isObservable(value)) { 
       var isSubscriberChange = false; 
       var isEditorChange = true; 
       $element.html(value()); 
       var isEditorChange = false; 

       $element.on('input, change, keyup, mouseup', function() { 
        if (!isSubscriberChange) { 
         isEditorChange = true; 
         value($element.html()); 
         isEditorChange = false; 
        } 
       }); 
       value.subscribe(function (newValue) { 
        if (!isEditorChange) { 
         isSubscriberChange = true; 
         $element.html(newValue); 
         isSubscriberChange = false; 
        } 
       }); 
      } 
     } 
    } 

у меня есть следующий код для связывания,

$(function() { 
    $.getJSON("/getdata", function (data) { 

      ko.applyBindings({ 
       testList: [{ 
        test: ko.observable() 
       }, 
       { 
        test: ko.observable() 
       }] 
      }, document.getElementById('htmled')); 

    }); 
}); 

HTML следующим образом

<div id="htmled" data-bind="foreach:testList"> 
       Data 
    <div class="editor" data-bind="wysiwyg: test">Edit this data</div> 

</div> 

Бинди ng работает и показывает панель инструментов, когда я вызываю ko.applyBindings вне метода $ .getJSON. Но когда я вызываю applyBindings внутри, панели инструментов не появляются. Может ли кто-нибудь помочь мне в этом? Мне, наверное, что-то не хватает, любая помощь по этому поводу очень ценится.

Jsfiddle Добавлено

Рабочая: http://jsfiddle.net/jogejyothish/h4Lt3/1/ не работает: http://jsfiddle.net/jogejyothish/Se8yR/2/

Jyothish

Answer 1

То, что происходит это:

1. страница загружается с одной дел. KO еще не применяется к этому div.
2. документы.ready() пожары. Сценарий CKEditor применил CKEditor к любым соответствующим divs (none).
3. Вы делаете свой звонок ajax.
4. Выполняется вызов Ajax. Вы применяете привязки.
5. KO вставляет два новых div, ни один из которых не имеет CKEditor.

Для того, чтобы исправить это, вам нужно добавить некоторый код внутри Ajax функции успеха вручную инициализация CKEditors, как:

 $(".editor").each(function(idx, el) { 
      CKEDITOR.inline(el) 
     }); 

Вот он, работая в своей скрипке:

http://jsfiddle.net/Se8yR/5/

Причина, по которой ваша рабочая версия работает, связана с тем, что привязки применяются в документе document.ready, поэтому KO отображает два элемента div вовремя, и CKEditor успешно применяется к ним.

Answer 2

CKEditor требуется некоторое время для загрузки.

В вашем первом примере он загружается после применения ko, который отлично работает.

Во втором примере он загружается до применения ko. Проблема в том, что CKEditor ищет атрибут contenteditable, который вы устанавливаете с помощью ko, поэтому редактор не создается.

Вы можете создать его вручную с помощью:

CKEDITOR.inline(element).setData(valueUnwrapped || $element.html()); 

Doc

Demo