title: Hiding empty elements on page load, but not afterwards using knockout.js
body: <p>I have a form with a lot of inputs.</p>
  
  <p>I am using the following syntax within my form: <code>&lt;!-- ko if: PropertyName --&gt;</code>. I am using this statement in the form for specific fields. This allows me to hide values that are not defined (actually not hide, but remove from DOM).</p>
  
  <p>However, I do not need to hide them on the fly. I mean, when value was not empty and was loaded, then user can edit it, and user can empty it. In this case input disappears, I do not need this.</p>
  
  <p>Can you suggest me – how to change my markup and what binding to use?</p>
  
  <pre><code>&lt;!-- ko if: IsEmptyOnLoad(Property1) --&gt;.
  &lt;input type="text" data-bind="value: Property1" /&gt;
  &lt;!-- /ko --&gt;
  
  &lt;!-- ko if: IsEmptyOnLoad (Property2) --&gt;.
  &lt;input type="text" data-bind="value: Property2" /&gt;
  &lt;!-- /ko --&gt;
  
  var myModel = function() {
      var self = this;
  
      self.Property1= ko.observable("non-empty");
      self.Property2= ko.observable();
  
      //self.IsEmptyOnLoad  is not implemented, how to implement?
  };
  
  var m = new myModel();
  ko.applyBindings(m);
  </code></pre>
  
  <p>You can try playing with the <a href="http://jsfiddle.net/2FTEM/5/">corresponding JSFiddle</a>.</p>
  
  <p>It could be strange, but I really have business scenario:</p>
  
  <ul>
  <li>onload do not show any empty variables, so after page is loaded there would be only non-empty variables loaded into the page</li>
  <li>after page is loaded, user can edit variables, some of those variables can be removed (become empty), but in this case I do not need to hide empty variables</li>
  </ul>