javascript - knockoutjs html 绑定(bind)不起作用

Question

我正在尝试使用 html 绑定(bind)将一些 html 绑定(bind)到标签，使标签显示指定的文本。

标签不显示任何文本，但在浏览器中检查页面表明它使用 html 绑定(bind)来显示一些文本(不显示文本)。

为什么标签中没有显示文本？

这是我的代码:

将 html 绑定(bind)到 viewmodel(注意代码注释):

"use strict";

qb.bindings.QuoteDetails = function (quoteDetailsVm) {
    var _$step1 = $("#step1");

    var _quoteDetailsSelector = ".quoteBuy";
    _$step1.find(".saveQuote" + _quoteDetailsSelector)
        .koClick("saveQuote")
        .koText("saveQuoteLabel");


    var ctaText = _$step1.find(".callToActionDescription");
    ctaText.koHtml("processedCtaText");
    $.koDataBind();

    quoteDetailsVm.email = "'sdfd'";
    _$step1.find("div.email label").koHtml(quoteDetailsVm.email); // this is the label to bind

    var _nodes = _$step1.find(_quoteDetailsSelector);
    _nodes.push(ctaText[0]);
    _.each(_nodes, function(node) {
        ko.applyBindings(quoteDetailsVm, node);
    });
};

这是我们定义 kohtml() 的地方:

(function ($) {
    var _bindings = [];

    var _koBind = function ($selector, binding, value) {
        var _jsToString = function(input) {
            var _result = "";

            for (var _key in input) {
                var _val = input[_key];
                if (typeof(_val) === "object")
                    _val = _jsToString(_val);

                _result = _result + (_result ? ", " : "") + _key + ": " + _val;
            }

            return "{ " + _result + " }";
        };

        if ($selector.length === 0) {
            console.warn("koBind selector does not return any elements - " + $selector.selector);
            return $selector;
        }

        if (typeof (value) === "object")
            value = _jsToString(value);

        _bindings.push({
            $selector: $selector,
            binding: binding,
            value: value
        });

        return $selector;
    };

    $.fn.koBind = function (binding, value) {
        return _koBind(this, binding, value);
    };

    $.fn.koVisible = function (visibility) {
        return _koBind(this, "visible", visibility);
    };

    $.fn.koText = function (text) {
        return _koBind(this, "text", text);
    };

    $.fn.koHtml = function (html) {
        return _koBind(this, "html", html);
    };

    $.fn.koCss = function (classes) {
        return _koBind(this, "css", classes);
    };

    $.fn.koStyle = function (styles) {
        return _koBind(this, "style", styles);
    };

    $.fn.koAttr = function (attrs) {
        return _koBind(this, "attr", attrs);
    };

    $.fn.koForeach = function (enumerable) {
        return _koBind(this, "foreach", enumerable);
    };

    $.fn.koIf = function (condition) {
        return _koBind(this, "if", condition);
    };

    $.fn.koIfnot = function (condition) {
        return _koBind(this, "ifnot", condition);
    };

    $.fn.koWith = function (context) {
        return _koBind(this, "with", context);
    };

    $.fn.koClick = function (callback) {
        return _koBind(this, "click", callback);
    };

    $.fn.koEvent = function (events) {
        return _koBind(this, "event", events);
    };

    $.fn.koSubmit = function (onSubmit) {
        return _koBind(this, "submit", onSubmit);
    };

    $.fn.koEnable = function (condition) {
        return _koBind(this, "enable", condition);
    };

    $.fn.koDisable = function (condition) {
        return _koBind(this, "disable", condition);
    };

    $.fn.koValue = function (value) {
        return _koBind(this, "value", value);
    };

    $.fn.koHasfocus = function (condition) {
        return _koBind(this, "hasfocus", condition);
    };

    $.fn.koChecked = function (condition) {
        return _koBind(this, "checked", condition);
    };

    $.fn.koOptions = function (optionList) {
        return _koBind(this, "options", optionList);
    };

    $.fn.koOptionsCaption = function (optionsCaption) {
        return _koBind(this, "optionsCaption", optionsCaption);
    };

    $.fn.koSelectedOptions = function (selectedList) {
        return _koBind(this, "selectedOptions", selectedList);
    };

    $.fn.koUniqueName = function (enabled) {
        return _koBind(this, "uniqueName", enabled);
    };

    $.fn.koPlaceholder = function(text) {
        return _koBind(this, "attr", { placeholder: text });
    };

    $.koDataBind = function () {
        var _elements = [];

        // put all the elements into an array
        var _findElement = function (el) {
            var _found = _elements.filter(function (element) {
                return element.element == el;
            });

            if (_found)
                return _found[0];

            return false;
        };

        $.each(_bindings, function (i, binding) {
            $.each(binding.$selector, function (j, el) {
                var _element = _findElement(el);
                if (_element) {
                    _element.bindings.push({
                        binding: binding.binding,
                        value: binding.value
                    });
                } else {
                    _elements.push({
                        element: el,
                        bindings: [{
                            binding: binding.binding,
                            value: binding.value
                        }]
                    });
                }
            });
        });

        _bindings = [];

        $.each(_elements, function (index, element) {
            var _el = element.element;

            var _bindVal = "";
            $.each(element.bindings, function (i, binding) {
                if (_bindVal)
                    _bindVal = _bindVal + ", " + binding.binding + ": " + binding.value;
                else
                    _bindVal = binding.binding + ": " + binding.value;
            });

            $(_el).attr("data-bind", _bindVal);
        });
    };

    $.koApplyBindings = function (viewModel) {
        $.koDataBind();
        ko.applyBindings(viewModel);
    };
})(jQuery);

这是已编码的相关 html:

<!-- Primary Email Field-->

    <div class="email row">
        <div class="label">
            <label></label>
        </div>
        <div class="field">
            <input class="email" type="text" placeholder="e.g. john.smith@example.com" autocomplete="email" />
            <p class="error-message emailError"></p>
        </div>
    </div>

    <!-- End Primary Email Field-->

这是通过在浏览器中检查页面的输出 html:

<div class="email row">
        <div class="label">
            <label data-bind="html: 'sdfd'"></label>
        </div>
        <div class="field">
            <input class="email" type="text" placeholder="e.g. john.smith@example.com" autocomplete="email">
            <p class="error-message emailError"></p>
        </div>
    </div>

Answer 1

What is wrong with the code in your opinion?

在 Knockout 中，HTML 描述了整个应用程序。与普通 HTML 描述页面结构的方式相同，Knockout 绑定(bind)描述所有行为:什么是可点击的、什么显示变量等。此处附加绑定(bind)的技术消除了所有的清晰度，但没有做出任何改进。有一个额外的代码层只是为了附加绑定(bind)，需要深入了解 HTML 结构才能知道什么被绑定(bind)在哪里。这是深不可测的。而且它显然不起作用。

我的建议是将标记放回到 HTML 中，至少对于有问题的元素，然后看看是否有效。