title: How to make the visible binding to work
body: <p>I'm experimenting with Knockout.js, and can't make the <code>visible</code> binding to work in the following code when returning an empty array (here's its <a href="https://jsfiddle.net/8u2sxrge/3/" rel="nofollow noreferrer">fiddle</a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready()
  {
      BuildFactoryGrid();
  }
  
  function BuildFactoryGrid ()
  {
      var factoryViewModel = new FactoryViewModel();
      ko.applyBindings(factoryViewModel);
      factoryViewModel.init();
  }
  
  function FactoryViewModel ()
  {
      var self = this;
      self.FactoryRecords = ko.observableArray([]);
      self.FactoryRecordsLength = ko.computed(function ()
      {
          return self.FactoryRecords().length;
      });
  
      self.init = function ()
      {
          self.FactoryRecords(GetFactoryData());
      };
  }
  
  function GetFactoryData ()
  {
      var objArr =   
      [
        {
          District: 1, 
          Department: 22,
          Team: 33
        },
        {
          District: 1, 
          Department: 24,
          Team: 35
        },
        {
          District: 2, 
          Department: 54,
          Team: 9
        },
      ];
      return objArr;
      // return []; // remove comment to return an empty array
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>tr&gt;th, td {
    text-align: center;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;table class="table table-bordered table-condensed hover"&gt;
      &lt;thead&gt;
          &lt;tr class="active"&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;District&lt;/th&gt;
              &lt;th&gt;Department&lt;/th&gt;
              &lt;th&gt;Team&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: FactoryRecords"&gt;
          &lt;tr&gt; 
              &lt;td&gt;
                  &lt;input type="checkbox" /&gt;
              &lt;/td&gt;
              &lt;td data-bind="text: District"&gt;&lt;/td&gt;
              &lt;td data-bind="text: Department"&gt;&lt;/td&gt;
              &lt;td data-bind="text: Team"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr data-bind="visible: $parent.FactoryRecordsLength() == 0 "&gt;
              &lt;td colspan="4"&gt;No Records&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When returning an empty array, the "No Records" <code>span</code> should appear, but it doesn't. Be glad to understand why.</p>