javascript - knockout if bindings not evaluated till after initial render -

i've noticed on firefox 3.6 though if binding evaluates false dom tree rendered first binding gets evaluated , dom tree removed. results in screen flickering:

jsfiddle

<!-- ko ifnot: isediting -->     <span data-bind="{ text:systemname }"></span> <!-- /ko --> <!-- ko if: isediting -->     <input type="text" id="systemname" data-bind="{ value: systemname }" />     <h1>you should not see me on first render</h1> <!-- /ko --> 

when using firefox 3.6 notice text "you should not see me on first render" flashes disappears.

how can resolve issue? using template binding help?

http://knockoutjs.com/documentation/template-binding.html

here how can go through

<button data-bind="click: click">toogle isediting</button>  <div data-bind='template:{ name: "temp", data: isediting }'></div>  <script id='temp' type='text/html'>     <!-- ko ifnot: $root.isediting -->         <span data-bind="{ text:$root.systemname }"></span>     <!-- /ko -->     <!-- ko if: $root.isediting -->         <input type="text" id="systemname" data-bind="{ value: $root.systemname }" />         <h1>you should not see me on first render</h1>     <!-- /ko --> </script>   

and

var viewmodel = function() {     var self = this;     self.systemname = ko.observable('test systemname');     self.isediting = ko.observable(false);     self.click = function()     {         self.isediting(!self.isediting());     } }  ko.applybindings(new viewmodel());   

fiddle demo