How can I bind the dynamic HTML inject to inner div using knockout?

Question

I want to bind the dynamic HTML with knockout. here I attached two images for references.

in first Image I am going to data-bind with knockout. there is json object coming from the asp.net webservice Json format. after that When I click on the '+' icon then I am added html template inject after the '+' item div, and then bind that data with new json request.

first, I bind the ko.Applybindigs() with whole data list with one Viewmodel and same view model not working for newly injected Html elements..

On ready evennt I doing binding.

$(document).ready(function(){
 var ViewModel = function () {            
            var self = this;
             self.result = ko.observableArray('');
             self.newresult = ko.observableArray('');
         };
         var vmLab = new ViewModel();
         ko.applyBindings(vmLab);
});

after new HTML elements injecting on '+' icon click event. then trying to add array of json objects in "newresult" observalbe array.. but it getting error. "Error You cannot apply bindings multiple times to the same element"

How I can achieve this by knockout .. some Html added from the jquery and bind same view model.. please suggest me or give alternate solution.

Bind data-list

opened the data-list item

what does fiddle display? i see only two checkboxes with no label and functionality? — Muhammad Raheel
@raheelshan I tried but template not binding with json reponse. I tried to ko.binding but no record binding. please help me. I declared variable with json reponse.. — Abhishek B.
use this one, I format the json reponse.. refer then jsonreponse variable, I need to bind this, and I also added comment "html loaded by clicking" like this in it.. jsfiddle.net/abhishekbhalani/po8cq1kx/2 — Abhishek B.

joec4i joec4i · Accepted Answer · 2014-08-22T11:36:06

You should declare the variable inside your view model before using it in the foreach binding. Check this out: http://jsfiddle.net/po8cq1kx/3/

var ViewModel = function () {            
    this.result = ko.observableArray([]);              
};

var vmLab = new ViewModel();
ko.applyBindings(vmLab);

vmLab.result(updatedData);

How can I bind the dynamic HTML inject to inner div using knockout?

1 Answers