Question

我正在构建一个自定义绑定“sortable” 1）可排序绑定扩展了foreach绑定 2）向每个子节点添加属性“draggable =”true“。

<div data-bind="sortable:{foreach: myCollection}">
  <div data-bind="text: $data"></div>
</div>

这是我想要生成的代码。

<div data-bind="sortable:{foreach: myCollection}">
  <div draggable="true" data-bind="text: $data">item1</div>
  <div draggable="true" data-bind="text: $data">item2</div>
  <div draggable="true" data-bind="text: $data">item3</div>
</div>

使用以下自定义绑定我设法渲染项目，但我无法弄清楚如何向每个子节点添加属性。

init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
  var value = valueAccessor().foreach;
  ko.applyBindingsToNode(element, { foreach: {data: value} });

  // add attribute draggable="true" to each child node
  // TODO

  // tell ko that we have already handled binding the children of this element
  return { controlsDescendantBindings: true };
}

我尝试使用applyBindingsToDescendants但无济于事。

jsbin：http://jsbin.com/jihupawero/edit?html,js,output

ps：我不想在绑定html（模板）中添加属性，因为我认为这应该对用户隐藏并在可排序绑定中完成。

Answer 1

这是否解决了您的任务（JSBin）？

<div data-bind="sortable: myCollection">
    <div data-bind="text: $data"></div>
</div>


ko.bindingHandlers.sortable = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor();
        ko.applyBindingsToNode(element, { foreach: value });
        $(element).children().attr("draggable", true);
        return { controlsDescendantBindings: true };
    }
};

更新1

<div draggable="true" data-bind="text: $data"></div>

或

<div data-bind="text: value, attr: { draggable: isDraggable }"></div>

您的模型应包含“value”和“isDraggable”属性：

var viewModel = function(){
  var model = {};
  model.myCollection = ko.observableArray([{ value:1, isDraggable: true}, { value:2, isDraggable: false},{ value:3, isDraggable: true}]);
  return model;
}();

在自定义foreach绑定中为每个子节点添加属性

1 个答案:

更新1