Knockout.js contentarray

我试图允许编辑字符串数组中的项目，如下所示：

html 虽然自定义

editableHTML

处理程序适用于常规（非数组）可观察对象，但它并没有将其切割为可观察对象。有人知道为什么吗？我对KO还是新手。

选项1： 您可以使用自定义方向（

context

在我的代码中）将

editableHTML

处理程序显式指向父数组（

titles

）

一旦获得对父数组的引用，就可以使用每个可观察数组可用的

replace

方法来更新值

比如：

ko.bindingHandlers.editableHTML = {
  init: function(element, valueAccessor, allBindings) {
    var $element = $(element);
    var initialValue = ko.utils.unwrapObservable(valueAccessor());
    var parentContext = allBindings.get('context');

    $element.html(initialValue);

    $element.on('keyup', function() {
      var curVal = valueAccessor();
      var newVal = $element.html();

      if (parentContext)
          parentContext.replace(curVal, newVal);
      else if (ko.isObservable(valueAccessor()))
          valueAccessor()(newVal);
    });
  }
};

然后：

更新的视图模型：

var viewModel = {
   titles: ko.observableArray([ko.observable("one"), ko.observable("two")])
};

HTML保持不变：

<li class="title"
    contenteditable="true"
    data-bind="editableHTML: $data"></li>

---

请参见

查看您的控制台

未捕获类型错误：字符串不是函数

是的，我见过，但我还不确定这里发生了什么。更新：这个提琴显示我的处理程序可以处理非数组数据。数组中的项目也需要是可观察的。但是，当使用foreach绑定时，Knockout将自动展开数组中的每个项，这将导致相同的行为@AaronCarlson，通过传递

$rawData

而不是

$data

，您可以克服自动展开的问题，仍然可以访问可观察函数，但是，这当然需要对绑定处理程序code.FYI进行一些更改-使用选项1，如果列表中存在重复项，并且最后一项被编辑，则列表中的第一项将被更新。

<li class="title"
    contenteditable="true"
    data-bind="editableHTML: $data, context: $parent.titles"></li>

ko.bindingHandlers.editableHTML = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var $element = $(element);
    var initialValue = ko.utils.unwrapObservable(valueAccessor());
    var origObservable = bindingContext.$rawData;

    $element.html(initialValue);

    $element.on('keyup', function() {
      var curVal = valueAccessor();
      var newVal = $element.html();

      if (ko.isObservable($origObservable))
          origObservable(newVal);
    });
  }
};

var viewModel = {
   titles: ko.observableArray([ko.observable("one"), ko.observable("two")])
};

<li class="title"
    contenteditable="true"
    data-bind="editableHTML: $data"></li>