Question

我正在尝试动态创建一个输入文本框，并尝试在代码中显示的javascript代码中添加绑定。在UI中，我可以看到文本框。但不幸的是，绑定不适用。请指导我如何使这项工作。感谢。

代码：

$(document).ready(function() {
function viewModel() {

    var self = this;

    self.rolefilter = ko.observable("");

    self.role_hdr_func = function(context) {
        var filter = $(document.createElement('input'));

        ko.applyBindingsToNode(filter, {
            value : self.rolefilter,
            valueUpdate : 'afterkeydown'
        });

        var parentElement = $(context.headerContext.parentElement);
        parentElement.append(filter);
    };
};

var vm = new viewModel();
ko.applyBindings(vm);

});

Answer 1

使用KO注入HTML的一种更强大的方法是为模板引擎使用自定义字符串源。

你可以看看我的组合框，看它是如何完成的，

https://github.com/AndersMalmgren/Knockout.Combobox/blob/master/src/knockout.combobox.js#L344

基本上你像这样实现自己的字符串源

//string template source engine
var stringTemplateSource = function (template) {
    this.template = template;
};

stringTemplateSource.prototype.text = function () {
    return this.template;
};

var stringTemplateEngine = new ko.nativeTemplateEngine();
stringTemplateEngine.makeTemplateSource = function (template) {
    return new stringTemplateSource(template);
};

然后您可以使用ko.renderTemplate呈现字符串

ko.renderTemplate(template, bindingContext.createChildContext(data), { templateEngine: stringTemplateEngine }, element, "replaceChildren");

{ templateEngine: stringTemplateEngine }很重要，它告诉KO使用您的字符串源而不是默认的脚本标记源。

动态添加html元素并对其应用绑定

1 个答案: