Question

我在我的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 ())

Answer 1

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

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>

Answer 2

Summernote，就像其他许多＆＃34;魔术＆＃34; JS库，修改原始的html元素，并在初始化编辑器时附加自己的DOM结构。当与JS框架集成时，这通常会导致问题，这些框架通过元素属性支持和鼓励数据绑定。

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

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

现在，由于summernote创建了一个类名为note-editable的编辑器div元素，因此您可以通过使用其中一个回调参数以编程方式设置 knockout 绑定：

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

确保在 summernote初始化之后进行ko初始化。另外请注意，我将值绑定替换为 html 绑定。虽然我根本不熟悉淘汰赛，但我很确定你需要它......有关详细信息，请参阅ko html binding。

Answer 3

该问题与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标签有关，在您的情况下会删除标签。这是一个类似的problem，但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>

注意：结果html中将缺少tbody

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

3 个答案: