将挖空视图模型绑定到 Bootstrap 树视图

Question

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

目前，我正在将 JSON 从 API 调用传递给视图模型的构造函数。这稍后会更改，但为了简单起见，我正在这样做。

那么我需要的是为每个节点绑定点击事件。因此，如果我单击根节点，没有任何反应，单击一个文件夹，我可以获得所有它的直接子文本值的列表（现在只是提醒它们），如果我单击文件节点，我会提醒 'data' 来自该节点的值。

这里是 fiddle 看看我到目前为止做了什么。

我的视图模型只是用 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 'see' 点击事件。因此，点击一个节点，计算出的敲除（我认为？）触发，然后我可以根据绑定事件控制 UI。

除此之外，我还有一个显示文件列表的 DIV。我的意思是，当一个文件夹级节点被选中时，我可以用该所选文件夹节点的子节点的所有 'text' 值填充 div。

任何关于我如何实现这一目标的指示都将是惊人的。我只是不确定如何让 data-bind="click... 到达节点，然后节点可以运行当前在我的 fiddle.[=15= 中的 'onclick' 中的代码]

Answer 1

我已经使用自定义绑定更新了您的 fiddle：https://jsfiddle.net/h15n2tp7/2/

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

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

将挖空视图模型绑定到 Bootstrap 树视图

Bind knockout view model to Bootstrap Tree View

javascript

jquery

twitter-bootstrap

knockout.js

bootstrap-treeview