knockout template binding not working fully

Question

I am using javascript template with knockout.

<div data-bind="template: { name: 'treeElement', foreach: results }">'

<script type=text/html>
 <!--ko if: a>b -->
    <div data-bind={textcontent:a}/>`
<!--/ko-->
</script>

something like above.. I am geting displayed div element with textcontetn with value of a however containerless binding is not getting applied.. a>b is not calculating. so its just ignoring syntax..

Answer 1

• When you are writing the name of properties like that in comment binding you need to execute them in order to resolve them to their result as currently you are simply comparing two functions.

• Furthermore your markup is invalid as both of your div tags are not closed and end with a wired single quote which makes bindings fail.

• There is such binding in knockout known as textcontent.

If you change your html to:

<div data-bind="template: { name: 'treeElement', foreach: results }"></div>

<script type="text/html" id="treeElement">
 <!--ko if: a() > b() -->
    <div data-bind="text: a() + ' is bigger than ' + b()"/></div>
 <!--/ko-->
</script>

and we assume you have a view model similar to my construct of your scenario which is:

var treeElements = [
    {"a" : 2 , "b" : 1},
    {"a" : 4 , "b" : 6},
    {"a" : 9 , "b" : 5},
    {"a" : 2 , "b" : 7},
    {"a" : 4 , "b" : 9},
]

function treeElement(data){
    this.a = ko.observable(data.a);
    this.b = ko.observable(data.b);
}

function viewmodel(){
    var self = this;
    self.results = ko.observableArray();
    self.init = function(){
        ko.utils.arrayForEach(treeElements, function(item){
            self.results.push(new treeElement(item));
        });
    }
}

var myVM = new viewmodel();
myVM.init();
ko.applyBindings(myVM);

You should be good to go.

Here is also a working fiddle