Question

When the following foreach gets bound, I need to be able to have a view add html to the ‘body’ div either from an $.get or just hardcoded. I need ‘model’ to be that vm, but i dont know how i can get the vm to add html to the page

<!--ko foreach:modules -->
<div class="module" data-bind="attr: {id:id}">
    <div class="head" data-bind="text:title"></div>
    <div class="body" data-bind=""></div>
</div>
<!-- /ko -->


my.Module = function (mod) {
    var m = mod || { },
        id = m.id || new Date().getTime(),
        css = ko.observable(m.css || { }),
        title = ko.observable(m.title || 'New Module'),
        privy = ko.observable(),
        model = ko.observable(new my.Models.DailyStatus());
    return {
        id: id,
        css: css,
        title: title,
        privy: privy,
        model: model
    };
};

my.Models.DailyStatus = function () {

    var venues = ko.observableArray(),
        init = function () {
            //Get HTML specific to my needs
            //Add to desired area of page
            //?????


            // Get data to fill venues
            update();
        },
        update = function () {
            my.service.getNewVenues(function (c) {
                venues(c.d.Payload);
            });
        };

    init();
    return {
        init: init,
        update: update,
        venues: venues
    };
};

is there a way that my Model can know what element will be his host?

Answer 1

This was answered in the comments so I figured I would move it to something I can select as an answer.

The ‘html’ binding was all that was needed.

For my particular needs I couldn’t seem to get ko bindings within the inserted html to render/take action so I switched to using a template tag with a function as its value which also provided a valid way to insert the html.