title: Why would an observable array have 0 length on my template, but not in my JS in knockout.js?
body: <p>I'm having some trouble with conditional rendering in knockout.js. I have an <code>observableArray</code> in my view model, which is created using <code>ko.utils.arrayMap()</code>. In my javascript code, outputting the length of that array returns the expected length. However, when I try to output that same length in my view, it's always 0.</p>
  
  <p>Here is my view code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- ko if: people().length == 0 --&gt;
      &lt;p data-bind="text: people().length"&gt;&lt;/p&gt;
      &lt;!-- always outputs 0 --&gt;
  &lt;!-- /ko --&gt;
  &lt;!-- ko if: people().length &gt; 0 --&gt;
      &lt;p data-bind="text: people().length"&gt;&lt;/p&gt;
      &lt;!-- never reaches this --&gt;
  &lt;!-- /ko --&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var data = [
      {
          firstName: "Bob",
          lastName: "Smith"
      },
      {
          firstName: "John",
          lastName: "Doe"
      },
      {
          firstName: "Jane",
          lastName: "Doe"
      }
  ];
  
  function Person(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
  }
  
  function ViewModel(data) {
      var self = this;
      self.people = ko.observableArray(ko.utils.arrayMap(data, function(i) {
          return ko.observable(new Person(i.firstName, i.lastName));
      }));
      console.log(self.people().length);  //Outputs 3, as expected
  }
  
  ko.applyBindings(new ViewModel(data));
  </code></pre>