Take the 2-minute tour ×

I have an ASP .NET MVC application, additonally I am using Knockout 2.0.0. I created a partial view which I would like to render to the page using knockout. The partial needs to be rendered within a Knockout foreach statement. I am unable to get the knockout HTML binding to work, and so I'm currently using a hack to put the html into the div using JQuery.

There is a lot of html on this page, so it's not possible to post all of the source code, so I will try and post the pertinent code:

<div data-bind="foreach:issues">
    @* SNIP - A lot of other html here*@
    <div id="myPartialDiv" data-bind="html: $parent.getHtml(issueId())">

Further down I have the following javascript function on my KO View Model (I have commented out my hack and included the code that returns HTML):

   var getHtml = function (issueId) {
              var baseUrl = '@Url.Action("GetHtmlAction","MyController")';
                    type: "POST",
                    url: baseUrl,
                    data: "&issueId=" + issueId,
                    success: function (data) {
                        return data;
                    error: function (req, status, error) {
                        //$('#myPartialDiv').html('Something went wrong.');
                        return 'Something went wrong.'
                    dataType: "text"

The code above results in no data being rendered to the page. USing Chrome debug tools, I see that there are no javascript errors occuring, and knockout is simply not binding the html of the div to the results returned from the getHtml function.

What am I doing wrong?


share|improve this question
Are you applying the bindings? Your example retrieves the data, but does nothing with it, as far as I can see. –  Christofer Eliasson Jun 12 '12 at 8:02
Yeah, sorry that code is not included but I am calling ko.applyBindings() on the page, and other bindings on the page work. –  King_Nothing Jun 12 '12 at 8:08
Oh and the function is being called when the HTML binding occurs, but it seems that knockout does not use the results (the 'return data;' line). If I remove my comments above the update is successful (using JQuery to update the div.Html). –  King_Nothing Jun 12 '12 at 8:11
add comment

2 Answers

up vote 4 down vote accepted

As Miroslav Popovic explains, the problem is that the AJAX request is asynchronous, so the return data is ignored and there is no return value from your call to getHtml.

I would suggest using a custom binding that handles the asynchronous HTML loading (I've put a working example here).

This works by taking 2 parameters to the asyncHtml: a function to call that takes a success callback as it's final parameter (plus any other parameters) and an array of the parameters that need to be passed to that function.

<div id="myPartialDiv" data-bind="asyncHtml: { source: getHtml, params: [123] }">Loading...</div>

The custom binding then grabs these values, concats a custom callback onto the parameters that are passed to it, and calls the specified function:

ko.bindingHandlers.asyncHtml = {
    init: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var parameters = value.params.concat([function(data) {
        value.source.apply(null, parameters);

Finally we can re-implement our view model HTML-retrieving method to make the POST call and invoke the new success handler:

var ViewModel = function() {
    this.getHtml = function(issueId, callback) {
                type: "POST",
                url: "/echo/html/",
                data: {
                        html: "<p>server response " + issueId + "</p>",
                        delay: 1
                success: callback,
                dataType: "text"

Note: for this example I am using the jsFiddle echo to post back a random response

share|improve this answer
I have now made this answer into a blog post as it seemed like a reusable implementation: blog.greatrexpectations.com/2012/06/12/… –  Steve Greatrex Jun 12 '12 at 10:29
Thanks a lot for your response. I will mark this as the correct answer as it provides a working example. I am unable to vote up your answer as I don't have enough reputation. I have not yet implemented this, but it looks like exactly what I needed. Thanks! –  King_Nothing Jun 12 '12 at 10:48
add comment

$.ajax is an asynchronous call. When you call it, the execution will just continue to the next statement in the getHtml function. Since this is the last statement, the getHtml function will return undefined.

About your return data;... This return is within a success callback function. The data will be result of that function, not the parent getHtml function. Besides, getHtml is already completed. You can't return a result from it.

How about having an observable property in your view model called html, and then find some other means of triggering the getHtml function (button click, some other success callback, issueId property change...), that will in turn set the 'html' property value. Then you could simply data-bind to that property data-bind="html: html".

share|improve this answer
Thanks for your feedback, this makes perfect sense. I would like to vote up your response but I don't yet have enough reputation. I'd prefer to Steve Greatrex's answer as correct since it provides an implementation that I can use. But thanks very must for your response. –  King_Nothing Jun 12 '12 at 10:45
Not a problem. Steve's solution is great. +1 –  Miroslav Popovic Jun 12 '12 at 10:53
add comment

Your Answer


