Question

Why the text binding work and the value doesn’t work, if I select the element with ID with jquery and print her value in console, the value’s the right but it’s not showing.

<center>
  <h2>Popover Demo</h2>
  <div data-bind="template: {name: 'popoverTemplate', foreach: commands}"></div>
</center>

<script type="text/html" id="popoverTemplate">
    <div style="display:none;" data-bind="attr: {'id': $data.command + 'Content'}, template: {name: 'popoverContent', data: $data.content}"></div>    
    <a href="#" class="btn" data-bind='text: $data.command, popover: $data'></a>
</script>

<script type="text/html" id="popoverContent">
    <p>Name: <input type="text" data-bind='value: $data.name'></p>
    <p>Email: <b data-bind='text: $data.email'></b></p>
</script>

​

Here is the complete example in JSFiddle http://jsfiddle.net/mounir/V3nVd/15/

Thanks

Answer 1

Here is a complete working example, I changed the ko.applyBindings() to ko.applyBindingsToDescendants to include the binding context $root and $parent when we would like to associate a button for example to a function in a root viewModel.

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
        });

Take a look @ http://jsfiddle.net/mounir/Mv3nP/4/