Checkbox 带复选框的gijgo treeview的敲除绑定

Checkbox 带复选框的gijgo treeview的敲除绑定,checkbox,knockout.js,treeview,Checkbox,Knockout.js,Treeview,我喜欢带有复选框的gijgo treeview,因为它干净整洁,解决了显示层次结构信息的问题。查看下面的链接以获取文档 由于knockout.js是前端开发的首选,因此需要为该特定需求开发knockout绑定 其思想是从后端填充层次结构数据,并将其绑定到定制的敲除绑定 ko.bindingHandlers.tree = { init: function (element, valueAccessor, allBindingsAccessor) { }, update: func

我喜欢带有复选框的gijgo treeview,因为它干净整洁,解决了显示层次结构信息的问题。查看下面的链接以获取文档

由于knockout.js是前端开发的首选,因此需要为该特定需求开发knockout绑定

其思想是从后端填充层次结构数据,并将其绑定到定制的敲除绑定

ko.bindingHandlers.tree = {
  init: function (element, valueAccessor, allBindingsAccessor) {

  },

  update: function (element, valueAccessor, allBindingsAccessor) {
    var options = valueAccessor() || {};
    var value = ko.utils.unwrapObservable(valueAccessor());
    var tree = $(element).tree(value);

  }
}
用户选择/取消选择一些复选框,然后点击保存按钮。选定/未选定的数据将再次发送回服务器进行保存

下面的代码是jquery中控件的用法

函数
tree.getCheckedNodes()
返回所选复选框的数组

如何从敲除绑定调用上述函数

ko.bindingHandlers.tree = {
  init: function (element, valueAccessor, allBindingsAccessor) {

  },

  update: function (element, valueAccessor, allBindingsAccessor) {
    var options = valueAccessor() || {};
    var value = ko.utils.unwrapObservable(valueAccessor());
    var tree = $(element).tree(value);

  }
}

init
方法中:

  • valueAccessor
  • 将初始数据转换为树小部件理解的格式
  • 使用正确的设置初始化小部件
    $(元素).tree({/*…*/})
  • 附加事件侦听器(
    .on(“change”,function(){}
    )以跟踪用户输入
    • 在事件侦听器函数中,将数据从UI写回viewmodel(例如
      valueAccessor()(tree.getCheckedNodes())
  • 可选:如果knockout将小部件从DOM中删除,则添加以清理小部件
update
方法中,如果视图模型的值发生更改,将调用该方法

  • 实现基于新设置更新小部件的逻辑。可能类似于
    tree.check(ko.unwrap(valueAccessor())
    。确保更新是“静默”的,如果它会触发
    更改
    事件,您将进入无限循环

感谢您的输入。“checkBoxChange”是一个事件。我应该如何将数据写回viewmodel。例如,tree.getCheckedNodes()返回所有选定节点的数组。需要将这些数组设置为observableArray。感谢您的洞察力。我们能够获得它。