Javascript 如何使用knockout js（MVVM）在mvc中绑定值summernote编辑器

我在mvc项目中成功地集成了summernote编辑器，但无法从textarea中获取值

我使用了敲除（MVVM）结构

<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 ())

var Demo=函数（Demo）{
var self=这个；
self.Description=ko.observable（演示？演示说明：“”）；
}
var DemoViewModel=函数（）{
var self=这个；
self.demo=ko.observable（新的demo（））；
}
applyBindings（新的DemoViewModel（））

这个问题与html以及浏览器将如何呈现html有关

你的样品

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

有关更多信息，请参阅。这个问题与浏览器自动插入tbody标记有关，在您的例子中，是删除标记。下面是一个类似的示例，但是使用了

foreach

您可以通过以下方式修复此问题

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

---

注意：

tbody

将不会出现在结果html

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

关于您的代码示例，我猜您正在使用一些类似于以下内容的jQuery代码初始化summernote：

$('.summernote').summernote(...);

现在，由于summernote创建了一个类名为

note editable

的编辑器div元素，因此您可以通过使用回调参数之一以编程方式设置敲除绑定：

$('.summernote').summernote({
  oninit: function() {
    $('.note-editable').attr('data-bind','html: Description');
  }
});  

---

确保ko初始化在summernote初始化之后进行。此外，请注意，我用html绑定替换了您的值绑定。虽然我对淘汰赛一点也不熟悉，但我很确定你会需要它。。。有关详细信息，请参见。

您最好的选择是像这样创建自定义绑定

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>

哦，很有意思，没有检查@哈迪克可能必须把你的答案和我的结合起来，才能走上正确的道路……：）顺便说一句：你的标题编辑现在有点混乱。。。确定只有这种因果关系吗？是的，但反过来说，这是相似的。浏览器会自动添加

t正文

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>