Hiding empty elements on page load, but not afterwards using knockout.js

I have a form with a lot of inputs.

I am using the following syntax within my form: <!-- ko if: PropertyName -->. 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).

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.

Can you suggest me – how to change my markup and what binding to use?

<!-- ko if: IsEmptyOnLoad(Property1) -->.
<input type="text" data-bind="value: Property1" />
<!-- /ko -->

<!-- ko if: IsEmptyOnLoad (Property2) -->.
<input type="text" data-bind="value: Property2" />
<!-- /ko -->

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);

You can try playing with the corresponding JSFiddle.

It could be strange, but I really have business scenario:

• onload do not show any empty variables, so after page is loaded there would be only non-empty variables loaded into the page
• 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