How to use '&' in if condition with in Virtual element knockout?

Question

I want to implement the virtual element like

<!-- ko if:  $index() > 9 && $index() < 20 -->

but it does not executed. Please help me for it.

Answer 1

Check this out: http://jsfiddle.net/y3KV2/

What you had there works, but it might be that you are missing something else, so I made this little small simple example so you can see how it works.

<div data-bind="foreach: data"> 
    <!-- ko if: $index() > 9 && $index() < 20  -->
        test <span data-bind="text: $index()"></span> 
    <!-- /ko -->
</div>


var vm = function () {
    var self = this;
    self.data = ko.observableArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]);
}

var s = new vm();

ko.applyBindings(s);

Answer 2

Use your DOM inspector to make sure that the comment node for your virtual element actually contains ampersands; the problem could either be that something that should be HTML-escaped isn't or that something that's already HTML-escaped is getting double-escaped.

Your server should be sending out

<!-- ko if:  $index() > 9 &amp;&amp; $index() < 20 -->

in order for the browser to create a comment node with the correct syntax for Knockout to parse. Use a tool like Curl to verify that it is.

Answer 3

Use a function ::

<!-- ko if: function() { myIndicesLoveMe($index) } -->

Then have the function somewhere and ensure it returns either True or False ::

myIndicesLoveMe = function(index) {
    return (index > 9 && index < 20);
}