如何在mvc中使用knockout js (MVVM)绑定value summernote编辑器

How to bind value summernote editor in mvc using knockout js (MVVM)

本文关键字：MVVM 绑定 value 编辑器 summernote js knockout mvc      更新时间：2023-09-26

我已经成功地集成了summernote编辑器在我的mvc项目，但我不能得到值形式textarea

i have use knockout (MVVM) structure.

<tbody data-bind='with:demo'>
     <textarea class="summernote" placeholder="Description" data-bind='value:   Description'></textarea>
</tbody>
var Demo = function (demo) {
var self = this;
self.Description = ko.observable(demo? demo.Description : '');
 }
var DemoViewModel = function () {
   var self = this;
   self.demo= ko.observable(new Demo());
 }
ko.applyBindings(new DemoViewModel ())

您最好的选择是创建自定义绑定，如下所示

ko.bindingHandlers.summernote = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        var $element = $(element);
        $element.html(value).summernote({
          callbacks:{
            onChange: function (contents) {
                valueAccessor()(contents);
            }
          }
        });
    }
};

你可以叫它

<textarea  data-bind="summernote: Description"></textarea>

Summernote，像许多其他"神奇"的JS库一样，在初始化编辑器时修改原始html元素并附加自己的DOM结构。这通常会导致在与支持并鼓励通过元素属性进行数据绑定的JS框架集成时出现问题。

关于你的代码样本，我猜你是初始化的summernote与一些jQuery代码，看起来类似:

$('.summernote').summernote(...);
现在，由于summernote创建了一个类名为note-editable的编辑器div元素，您可以通过使用一个回调参数以编程方式设置knockout绑定: 
$('.summernote').summernote({
  oninit: function() {
    $('.note-editable').attr('data-bind','html: Description');
  }
});

确保ko初始化发生在 summernote初始化之后。另外请注意，我将value绑定替换为html绑定。虽然我对淘汰赛一点也不熟悉，但我很确定你会需要它……

这个问题涉及到html以及浏览器如何呈现它。

样本

<tbody data-bind='with:demo'>
    <textarea class="summernote" placeholder="Description" data-bind='value: Description'></textarea>
</tbody>

呈现为。tbody去除，敲除后找不到Description结合

<textarea class="summernote" placeholder="Description" data-bind="value: Description"></textarea>

查看jsfiddle获取更多信息。这个问题与浏览器自动插入tbody标签的事实有关，在您的情况下删除了标签。这里有一个类似的问题，但foreach

您可以通过以下方式修复

<table>
    <tbody data-bind="with:demo">
        <tr>
            <td>
                <textarea placeholder="Description" data-bind="value: Description"></textarea>
            </td>
         </tr>
    </tbody>
</table>

查看jsfiddle获取更多信息

或者添加div标签(jsfiddle)

<div data-bind="with:demo">
    <tbody>
        <textarea placeholder="Description" data-bind="value: Description"></textarea>
    </tbody>
</div>

注意:tbody将在结果html

中缺席
相关文章：