title: knockoutjs html binding not working
body: <p>I'm trying to use the html binding to bind some html to a label, causing the label to display the specified text.</p>
  
  <p>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).</p>
  
  <p>Why is the text not displayed in the label?</p>
  
  <p>Here is my code:</p>
  
  <p>Binding the html to viewmodel (take note of code comment):</p>
  
  <pre><code>"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);
      });
  };
  </code></pre>
  
  <p>This is where we define kohtml():</p>
  
  <pre><code>(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);
  </code></pre>
  
  <p>This is the relevant html that has been coded:</p>
  
  <pre><code>&lt;!-- Primary Email Field--&gt;
  
      &lt;div class="email row"&gt;
          &lt;div class="label"&gt;
              &lt;label&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field"&gt;
              &lt;input class="email" type="text" placeholder="e.g. john.smith@example.com" autocomplete="email" /&gt;
              &lt;p class="error-message emailError"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- End Primary Email Field--&gt;
  </code></pre>
  
  <p>This is the output html by inspecting the page in the browser:</p>
  
  <pre><code>&lt;div class="email row"&gt;
          &lt;div class="label"&gt;
              &lt;label data-bind="html: 'sdfd'"&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field"&gt;
              &lt;input class="email" type="text" placeholder="e.g. john.smith@example.com" autocomplete="email"&gt;
              &lt;p class="error-message emailError"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>