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

   1 describe('Binding: Attr', {
   2     before_each: JSSpec.prepareTestNode,
   3
   4     'Should be able to set arbitrary attribute values': function() {
   5         var model = { myValue: "first value" };
   6         testNode.innerHTML = "<div data-bind='attr: {firstAttribute: myValue, \"second-attribute\": true}'></div>";
   7         ko.applyBindings(model, testNode);
   8         value_of(testNode.childNodes[0].getAttribute("firstAttribute")).should_be("first value");
   9         value_of(testNode.childNodes[0].getAttribute("second-attribute")).should_be("true");
  10     },
  11
  12     'Should be able to set \"name\" attribute, even on IE6-7': function() {
  13         var myValue = ko.observable("myName");
  14         testNode.innerHTML = "<input data-bind='attr: { name: myValue }' />";
  15         ko.applyBindings({ myValue: myValue }, testNode);
  16         value_of(testNode.childNodes[0].name).should_be("myName");
  17         if (testNode.childNodes[0].outerHTML) { // Old Firefox doesn't support outerHTML
  18             value_of(testNode.childNodes[0].outerHTML).should_match('name="?myName"?');
  19         }
  20         value_of(testNode.childNodes[0].getAttribute("name")).should_be("myName");
  21
  22         // Also check we can remove it (which, for a name attribute, means setting it to an empty string)
  23         myValue(false);
  24         value_of(testNode.childNodes[0].name).should_be("");
  25         if (testNode.childNodes[0].outerHTML) { // Old Firefox doesn't support outerHTML
  26             value_of(testNode.childNodes[0].outerHTML).should_not_match('name="?([^">]+)');
  27         }
  28         value_of(testNode.childNodes[0].getAttribute("name")).should_be("");
  29     },
  30
  31     'Should respond to changes in an observable value': function() {
  32         var model = { myprop : ko.observable("initial value") };
  33         testNode.innerHTML = "<div data-bind='attr: { someAttrib: myprop }'></div>";
  34         ko.applyBindings(model, testNode);
  35         value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be("initial value");
  36
  37         // Change the observable; observe it reflected in the DOM
  38         model.myprop("new value");
  39         value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be("new value");
  40     },
  41
  42     'Should remove the attribute if the value is strictly false, null, or undefined': function() {
  43         var model = { myprop : ko.observable() };
  44         testNode.innerHTML = "<div data-bind='attr: { someAttrib: myprop }'></div>";
  45         ko.applyBindings(model, testNode);
  46         ko.utils.arrayForEach([false, null, undefined], function(testValue) {
  47             model.myprop("nonempty value");
  48             value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be("nonempty value");
  49             model.myprop(testValue);
  50             value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be(null);
  51         });
  52     },
  53
  54     'Should be able to set class attribute and access it using className property': function() {
  55         var model = { myprop : ko.observable("newClass") };
  56         testNode.innerHTML = "<div class='oldClass' data-bind=\"attr: {'class': myprop}\"></div>";
  57         value_of(testNode.childNodes[0].className).should_be("oldClass");
  58         ko.applyBindings(model, testNode);
  59         value_of(testNode.childNodes[0].className).should_be("newClass");
  60         // Should be able to clear class also
  61         model.myprop(undefined);
  62         value_of(testNode.childNodes[0].className).should_be("");
  63         value_of(testNode.childNodes[0].getAttribute("class")).should_be(null);
  64     }
  65 });