Knockout.js HTML绑定不起作用

Question

I'm trying to use the html binding to bind some html to a label, causing the label to display the specified text.

The label does not display any text, but inspecting the page in the browser shows that it uses the html binding to display some text (without the text being displayed).

Why is the text not displayed in the label?

Here is my code:

Binding the html to viewmodel (take note of code comment):

"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);
    });
};

This is where we define 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);

This is the relevant html that has been coded:

<!-- 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-->

This is the output html by inspecting the page in the browser:

<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?

In Knockout, the HTML describes the entire app. In the same way that ordinary HTML describes a page's structure, the Knockout bindings describe all the behaviors: what is clickable, what displays a variable, etc. The technique of attaching bindings you have here removes all the clarity without making anything better. There's an extra layer of code just to attach bindings that requires a deep understanding of the HTML structure just to know what's being bound where. It's inscrutable. And it evidently doesn't work.

My recommendation is to put the markup back into the HTML, at least for the element in question, and see whether that works.