Javascript 将knockout.js与自定义模板引擎一起使用

我正试图通过knockout.js来完成这项工作

时间轴有一个可供您为时间轴上的每个事件编写自定义HTML的窗口。在我的例子中，它看起来是这样的：

var options = {
    ... // other options
    template: function(item) {
        var html = '<b>' + item.subject + '</b>'+
                '<p>' + item.owner.username + ' (' + item.format.name + ' for ' + item.channel.name + ')</p>' +
                '<p><input type="checkbox"';
        if (item.done !== null) {
            html += "checked"
        };
        html += '></p>';
        html += '<pre data-bind="text: $root"></pre>';  // http://www.knockmeout.net/2013/06/knockout-debugging-strategies-plugin.html
        return html;
    }
}

var选项={
…//其他选择
模板：功能（项目）{
var html=''+item.subject+''的值+
“”+item.owner.username+”（“+item.format.name+”代表“+item.channel.name+”）
'+
“
”；
html+=''；//http://www.knockmeout.net/2013/06/knockout-debugging-strategies-plugin.html
返回html；
}
}

所有的数据绑定都经过测试，还可以，但是我想不出一种方法可以将淘汰行为附加到vis.js timeline库生成的模板上。正如您所看到的，即使尝试打印$root数据也无济于事

---

如何将可观察对象附加到此模板？

时间轴组件选项的模板属性允许您提供HTML元素，而不是HTML字符串（如果需要）。这可能是实现你所追求的目标的一种方法。通过这种方式，您可以创建元素，使用knockout将提供的项作为上下文应用于元素（及其子元素）上的绑定，并将该元素返回到vis.js

执行此操作的示例可以使用类似于以下内容的代码：

var templateHtml = '<div data-bind="text: content"></div>'
//Set the template to a custom template which lets knokcout bind the items
options.template = function(item){
    //Create a div wrapper element to easily create elements from the template HTML
    var element = document.createElement('div');
    element.innerHTML = templateHtml;
    //Let knockout apply bindings on the element with the template, using the item as data context
    ko.applyBindings(item, element);
    //Return the bound element to vis.js, for adding in the component
    return element;
};

。

我在容器中添加了一个复选框，遇到了另一个问题。请参阅并尝试单击该复选框。只有禁用事件（可选择的

选项）才能单击复选框。（如果需要的话，我会把这个问题转移到另一个问题上。）@LaundroMat的确，在那些容器中放置可点击的东西并不能立即起作用，因为vis.js似乎劫持了所有的点击事件。通过按下按钮，在复选框的范围内移动鼠标，然后释放按钮，可以单击复选框。这不是问题的解决方案，只表明复选框起作用，问题在于vis.js的点击处理。然而，你完全正确，它应该作为一个不同的问题来处理。请在这里的评论中链接到该问题，以供参考。感谢您的跟进；我已将我的问题发布在