CODEWITHSUNDEEP
javascriptknockout.js
Troup
Troup

Reputation: 593

knockout if bindings not evaluated till after initial render

I've noticed on firefox 3.6 that even though an if binding evaluates to false the DOM tree will always be rendered first then the binding gets evaluated and the DOM tree will get removed. This results in the 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 you will notice that the text "YOU SHOULD NOT SEE ME ON FIRST RENDER" flashes up then disappears.

How can I resolve this issue? Will using a template binding help?

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

Upvotes: 0

Views: 281

Answers (1)

Muhammad Raheel
Muhammad Raheel

Reputation: 19882

Here is how you 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

Upvotes: 1

Related Questions