public/assets/knockout-2-2-1/spec/defaultBindings/htmlBehaviors.js

   1 describe('Binding: HTML', {
   2     before_each: JSSpec.prepareTestNode,
   3
   4     'Should assign the value to the node without HTML-encoding the value': function () {
   5         var model = { textProp: "My <span>HTML-containing</span> value" };
   6         testNode.innerHTML = "<span data-bind='html:textProp'></span>";
   7         ko.applyBindings(model, testNode);
   8         value_of(testNode.childNodes[0].innerHTML.toLowerCase()).should_be(model.textProp.toLowerCase());
   9         value_of(testNode.childNodes[0].childNodes[1].innerHTML).should_be("HTML-containing");
  10     },
  11
  12     'Should assign an empty string as value if the model value is null': function () {
  13         testNode.innerHTML = "<span data-bind='html:(null)' ></span>";
  14         ko.applyBindings(null, testNode);
  15         value_of(testNode.childNodes[0].innerHTML).should_be("");
  16     },
  17
  18     'Should assign an empty string as value if the model value is undefined': function () {
  19         testNode.innerHTML = "<span data-bind='html:undefined' ></span>";
  20         ko.applyBindings(null, testNode);
  21         value_of(testNode.childNodes[0].innerHTML).should_be("");
  22     },
  23
  24     'Should be able to write arbitrary HTML, even if it is not semantically correct': function() {
  25         // Represents issue #98 (https://github.com/SteveSanderson/knockout/issues/98)
  26         // IE 8 and earlier is excessively strict about the use of .innerHTML - it throws
  27         // if you try to write a <P> tag inside an existing <P> tag, for example.
  28         var model = { textProp: "<p>hello</p><p>this isn't semantically correct</p>" };
  29         testNode.innerHTML = "<p data-bind='html:textProp'></p>";
  30         ko.applyBindings(model, testNode);
  31         value_of(testNode.childNodes[0]).should_contain_html(model.textProp);
  32     },
  33
  34     'Should be able to write arbitrary HTML, including <tr> elements into tables': function() {
  35         // Some HTML elements are awkward, because the browser implicitly adds surrounding
  36         // elements, or won't allow those elements to be direct children of others.
  37         // The most common examples relate to tables.
  38         var model = { textProp: "<tr><td>hello</td></tr>" };
  39         testNode.innerHTML = "<table data-bind='html:textProp'></table>";
  40         ko.applyBindings(model, testNode);
  41
  42         // Accept either of the following outcomes - there may or may not be an implicitly added <tbody>.
  43         var tr = testNode.childNodes[0].childNodes[0];
  44         if (tr.tagName == 'TBODY')
  45             tr = tr.childNodes[0];
  46
  47         var td = tr.childNodes[0];
  48
  49         value_of(tr.tagName).should_be("TR");
  50         value_of(td.tagName).should_be("TD");
  51         value_of('innerText' in td ? td.innerText : td.textContent).should_be("hello");
  52     }
  53 });