How to bind jQuery elements using KnockoutJS

Question

This is the HTML I'm trying to bind to. I would like to know how to bind the result of menuInnerHtml to the navigationMenu div. Right now the output is: [object Object][object Object][object Object][object Object][object Object][object Object] instead of the actual html.

<div id="navigationMenu" data-bind="html: get_Menu()"></div>

var menuInnerHtml = $();
var GlobalNavMenuViewModel = {

        get_Menu : function () {
            for (var i = 0; i < 10; i++) {
                if(i % 2 == 0 )
                {
                    menuInnerHtml += $("<li></li>").attr('class', 'L1').html("someInfo");
                }
            }
            return menuInnerHtml;
        }
    }

    // Bind Html
    ko.applyBindings(GlobalNavMenuViewModel);

BTW, very strange approach. I would suggest to create observable property and bind to it from all places you need and not reverse: bind one place of html to another html... — VikciaR, Dec 27 '13 at 20:55
As far as the "knockout way" my actual if structure for binding kinda complex so I'd like to just bind html I generate — Kevon, Dec 28 '13 at 00:40

score 0 · Accepted Answer · edited May 23 '17 at 12:11

Using jqueryobject.prop('outerHTML') (in sample jqueryobject is obj) to get the string form of JQuery Object.
you can more information about jquery object to string here

When we use HTML binding, the function should return string of html element

For HTML

<div id="navigationMenu" data-bind="html: get_Menu()"></div>

For Javascript

var menuInnerHtml = "";
var GlobalNavMenuViewModel = {

    get_Menu: function () {
        for (var i = 0; i < 10; i++) {
            if (i % 2 == 0) {
                var obj = $('<li />',{'class':'blue'}).html('peekaboo');
                menuInnerHtml+=obj.prop('outerHTML');

            }
        }
        return menuInnerHtml;
    }
}

// Bind Html
ko.applyBindings(GlobalNavMenuViewModel);

Working sample is here

How to bind jQuery elements using KnockoutJS

1 Answers1