knockout.js 带有复选框的gijgo树视图的挖空绑定

piah890a  于 2022-11-10  发布在  Go
关注(0)|答案(1)|浏览(123)

我喜欢这个有复选框的gijgo树视图,因为它干净整洁,而且它解决了显示层次结构信息的问题。查看下面的链接获取文档。
https://gijgo.com/tree/demos/bootstrap-treeview-checkbox
由于knockout.js是前端开发的首选,因此需要开发一个针对此特定要求的敲除绑定。
其思想是从后端填充层次结构数据并将其绑定到自定义敲除绑定。
用户选择/取消选择一些复选框,然后点击保存按钮。选择/取消选择的数据再次发送回服务器进行保存。
下面的代码是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);

  }
}
qc6wkl3g

qc6wkl3g1#

init方法中:

  • 展开视图模型从valueAccessor传递的小部件初始数据
  • 将初始数据转换为树微件能够识别的格式
  • 使用正确的设置$(element).tree({ /* ... */ })初始化小工具
  • 附加事件侦听器(.on("change", function() { })以跟踪用户输入
  • 在事件侦听器函数中,将数据从UI写回视图模型(例如valueAccessor() (tree.getCheckedNodes())
  • 可选:添加custom disposal logic,以便在knockout从DOM中移除小部件时对其进行清理

update方法中,如果视图模型的值发生更改,则调用该方法

  • 根据你的新设置实现更新小部件的逻辑。可能是类似tree.check(ko.unwrap(valueAccessor()))的东西。确保更新是“无声的”,如果它会触发change事件,你会在一个无限循环结束。

相关问题