Question

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

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

我需要的是将点击事件绑定到每个节点。因此，如果我单击根节点，没有任何反应，单击一个文件夹，我可以获得所有它的直接子文本值的列表（现在只提醒它们），如果我单击一个文件节点，我会发出警报数据＆＃39;来自该节点的价值。

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

我的视图模型只是使用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看到＆＃39;点击事件。因此，点击一个节点，一个淘汰计算（我认为？）会触发，然后我可以根据绑定事件控制UI。

除此之外，我有一个显示文件列表的DIV。我的意思是，当文件夹级别节点被选中时，我可以使用所有＆＃39;文本填充该div。来自所选文件夹节点的子节点的值。

任何有关如何实现这一目标的指示都会令人惊叹。我只是不确定如何将data-bind="click...提供给节点，然后节点可以运行当前在＆＃39; onclick＆＃39;中的代码。在我的小提琴里。

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函数。

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

1 个答案: