将剔除视图模型绑定到引导树视图

Question

我正在尝试让 Knockout 和 Bootstrap-TreeView 一起工作。 （组件：https://github.com/jonmiles/bootstrap-treeview）

目前，我将来自 API 调用的 JSON 传递给 View Model 的构造函数。这将在稍后更改，但为简单起见，我正在这样做。

然后我需要将点击事件绑定到每个节点。因此，如果我单击根节点，什么也没有发生，单击一个文件夹，我可以获得所有直接子文本值的列表（现在只是提醒它们），如果我单击一个文件节点，我会提醒“数据”该节点的值。

这是一个小提琴，看看我到目前为止做了什么。

https://jsfiddle.net/Cralis/h15n2tp7/

我的视图模型只是用 json 数据初始化。然后在视图模型中计算一个树视图的设置。

// Create the View Model.
var ViewModel = function(jsonData) {
  var self = this;
  self.MyData = ko.observable(jsonData);

  ko.computed(function() {
    $('#tree').treeview({
        data: self.MyData()
      })
      .on('nodeSelected', function(event, data) {
        if (data.nodeLevel == 2) { // Are we clicking a File?
          alert("Clicked a File. Data: " + data.data)

        }
        else
        if(data.nodeLevel == 1) { // We're clicking a folder.
           alert("Clicked a folder. Would like to somehow alert a list of all child node text values.")
        }
      });
  })
}

// Create the View Model and initialise with initial data 
var vm = new ViewModel(getTree());

// Bind.
ko.applyBindings(vm, document.getElementById("bindSection"));

这行得通，但我认为我使用 Knockout 的次数不多。那是因为我的点击事件在我的 javascript 中，而我的 Knockout 视图模型并没有任何控制。

如何让 Knockout “看到”点击事件。因此，单击一个节点，计算出的淘汰赛（我认为？）会触发，然后我可以根据绑定事件控制 UI。

除此之外，我还有一个显示文件列表的 DIV。我是这样的，当一个文件夹级节点被选中时，我可以使用来自该所选文件夹节点的子节点的所有“文本”值填充该 div。

任何关于我如何实现这一点的指示都会令人惊叹。我只是不确定如何将data-bind="click... 获取到节点，然后节点可以运行当前在我的小提琴中的“onclick”中的代码。

Answer 1

我已经用自定义绑定更新了你的小提琴：https://jsfiddle.net/h15n2tp7/2/

正如我已经在此问题中发布的那样：add-data-bind-property-to-a...

我认为这是最好的方法。这里的问题是 1) 获取 JSON 2) 应用绑定 3) 创建 DOM 元素之间的同步。创建自定义绑定可以让您轻松地做到这一点，而无需太多杂乱的代码。在您的情况下，当通过 $.get 完成 getTree 函数时，您需要在 .done 函数中创建一个视图模型，然后应用绑定。所以提供的小提琴会有所改变，但想法是一样的。请注意，您不需要任何可观察对象（如果在应用程序运行时树数据未更改）。如果确实发生了变化，请确保在自定义绑定 (knockout custom binding reference) 中实现 update 函数。