javascript - 将挖空 View 模型绑定(bind)到 Bootstrap Tree View

Question

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

目前，我将 API 调用中的 JSON 传递给 View 模型的构造函数。这稍后会改变，但为了简单起见，我这样做了。

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

这是一个 fiddle ，可以查看我到目前为止所做的事情。

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

我的 View 模型只是使用 json 数据进行初始化。然后 View 模型中的计算完成 TreeView 的设置。

// 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 View 模型实际上没有任何控制权。

如何允许 Knockout“查看”点击事件。因此，单击节点时，会触发计算出的 knockout (我认为？)，然后我可以根据绑定(bind)事件控制 UI。

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

任何关于我如何实现这一目标的指示都会很棒。我只是不确定如何将 data-bind="click... 获取到节点，然后节点可以运行我的 fiddle 中当前位于“onclick”中的代码。

Answer 1

我已经用自定义绑定(bind)更新了你的 fiddle :https://jsfiddle.net/h15n2tp7/2/

正如我已经在这个问题中发布的:add-data-bind-property-to-a...

我认为这是最好的方法。这里的问题是 1) 获取 JSON 2) 应用绑定(bind) 3) 创建 DOM 元素之间的同步。创建自定义绑定(bind)可以让您轻松完成此操作，而无需编写太多困惑的代码。在您的情况下，当通过 $.get 完成 getTree 函数时，您需要在 .done 函数中创建 View 模型，然后应用绑定(bind)。因此提供的 fiddle 会稍有变化，但想法是相同的。请注意，您不需要任何可观察量(如果应用程序运行时树数据没有更改)。如果它确实发生了变化，请确保您在自定义绑定(bind) ( knockout custom binding reference ) 中实现 update 函数。