如何通過ko.bindingHandler中的事件處理TinyMce

Question

如何從ko.binding中調用viewModel中的函數？

我想點擊一個可編輯的區域也可以在選擇框中顯示選定的文本。

我也遇到了一些問題：在直到用戶已經從「選擇」選擇

1. 全文doesn't表演。

2. 編輯全文內聯編輯器中的文本會導致輪廓編輯器摺疊。

3. 編輯標題會導致observable包含編輯標題的所有HTML代碼。

4. 在綁定中：「tinymceInstance.remove（）」返回錯誤消息。然而，將其註釋掉會導致所需的高亮功能，但內聯編輯器無法訪問。

5. 突出顯示不會按要求發生。

Here's的HTML：

<select size="2" style="width: 170px;" data-bind="options: Textbatches, optionsCaption: 'Choose...', optionsText: 'TextbatchTitle', value: SelectedText, click: $root.showIt2Me"></select> 

<div> 
    <fieldset> 
    <legend>Textbatches:<img id="btnMetatoggle" class="ui-icon ui-icon-arrow-4-diag" style="display: inline-block" /></legend> 
    <div id="details" class="textbatchdetails" data-bind="with: SelectedText"> 
     <div class="editor" data-bind="tinymce: TextbatchText, tinymceOptions: { selector: 'div.editor', inline: false }"></div> 
    </div> 
    </fieldset> 
</div> 

<div id="full-text"> 
    <fieldset> 
    <legend >Full text:</legend> 
    <div>      
    <!-- ko with: $root.SelectedText -->    
    <!-- ko foreach: $root.Textbatches() --> 
     <div data-bind="attr: {'id': 'Text' + TextbatchId}, event:{ click: $root.clickedThis }, css: { 'inverted-text': TextbatchId === $root.SelectedText().TextbatchId}"> 
      <h2 class="editableArea" data-bind="tinymce: TextbatchTitle, tinymceOptions: { selector: 'h2.editableArea', inline: true }"></h2> 
      <div class="editableArea" data-bind="tinymce: TextbatchText, tinymceOptions: { selector: 'div.editableArea', inline: true }"></div> 
     </div> 
    <!-- /ko --> 
    <!-- /ko --> 
    </div> 
    </fieldset> 
</div> 

見小提琴：http://jsfiddle.net/x8581f1y/23/

任何幫助高度讚賞。 Thanx提前！

Answer 1

您的綁定處理程序的參數不正確。您正在濫用可能導致問題的參數之一。對於這兩種init()和update()，參數爲：

1. element
2. valueAccessor
3. allBindings
4. viewModel
5. bindingContext

既然你最終想要的視圖模型參考，不需要使用綁定上下文，您可以在第四個參數中直接引用視圖模型。

function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
    ... 
    viewModel.someFunction(someArgs); // call directly on the view model 
} 

至於你的其他問題，我不太瞭解微小的mce，但你做了一些無效的假設。元素上沒有id，所以它在處理程序中始終未定義。在元素上初始化tiny mce之後，id被賦值。但是因爲你只需要訪問實例的引用，所有你需要使用的就是元素本身，而不是id。

ko.utils.domNodeDisposal.addDisposeCallback(element, function (element) { 
    var tinymceInstance = $(element).tinymce(); // get the instance 
    if (tinymceInstance) { 
     tinymceInstance.remove(); 
    } 
});