title: binding and ko.toJSON not working as expected
body: <p>I'm learning KO and trying to create a simple list item add/remove. but I have the following questions.</p>
  
  <p>Q1: If you click Add without enter a name, the item you just add will have <code>result</code> as name. why and how to prevent it while allowing empty as valid inputs?</p>
  
  <p>Q2: I would like to use the <code>&lt;pre&gt;</code> tag to show the JSON of current view model, but it's not showing anything. But the button shows something. <strong>I figured this one out. I need to use <code>ko.toJSON($data, null, 4)</code></strong>.</p>
  
  <p>Q3: It's related to Q2, the button shows something, but what it shows seem to be weird. After you enter a few items, then click <code>debug</code> button. You'll see all the items in the view model are replaced by the last item you change. </p>
  
  <p>Here's the <a href="http://jsfiddle.net/TgD6a/" rel="nofollow">fiddle</a>.</p>
  
  <p>CSS:</p>
  
  <pre><code>input[type=text], select {
      width:100px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function foodie() {
      this.name;
      this.food;
  }
  
  function foodieApp() {
      var self = this;
      self.foodies = ko.observableArray();
      self.foodieToAdd = ko.observable(new foodie());
  
      self.addFoodie = function () {
          this.foodies.push(this.foodieToAdd());
      };
  
      self.delFoodie = function (foodieToDel) {
          self.foodies.remove(foodieToDel);
      };
  
      self.debug = function () {
          alert(ko.toJSON(self, null, 4));
      };
  }
  
  var app = new foodieApp();
  ko.applyBindings(app);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;Foodie's Name
                  &lt;br/&gt;
                  &lt;input type=text data-bind='value: foodieToAdd().name' /&gt;
              &lt;/td&gt;
              &lt;td&gt;Foodie's Food
                  &lt;br/&gt;
                  &lt;select data-bind='value: foodieToAdd().food'&gt;
                      &lt;option value=apple&gt;Apple&lt;/option&gt;
                      &lt;option value=banana&gt;Banana&lt;/option&gt;
                      &lt;option value=cherry&gt;Cherry&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=button value=Add data-bind='click: addFoodie' /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind='foreach: foodies'&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;input type=text data-bind='value: name' /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;select data-bind='value: food'&gt;
                      &lt;option value=apple data-bind&gt;Apple&lt;/option&gt;
                      &lt;option value=banana&gt;Banana&lt;/option&gt;
                      &lt;option value=cherry&gt;Cherry&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=button value=del data-bind='click: $parent.delFoodie' /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;input type=button value=debug data-bind='click: debug' /&gt;
  &lt;!-- why the following &lt;pre&gt; tag is empty? --&gt;
  &lt;pre data-bind='text: ko.toJSON(app, null, 4)'&gt;&lt;/pre&gt;
  </code></pre>