Geek asks and answers

Knockoutjs binds a model to a template created using ko.renderTemplate

What I'm trying to do is create a DOM node, display the template with ko.renderTemplate, overwriting the created node, and then, in this template, both will be able to get data from a specific model and from viewModel $ root.

Example:

var data = new ModelData();
var domNode = document.createElement("div");
document.body.appendChild(domNode);
ko.renderTemplate('template', data, {}, domNode, 'replaceNode');

And the template might look like this:

<script type="text/html" id="template">
    <span data-bind="text: DataFromModel"></span>
    <ul data-bind="foreach: $root.DataFromViewModelRoot">
    </ul>
</script>

In this case, I do not get any data from $ root.DataFromViewModelRoot, because it believes that $ root-data is ModelData (and I understand why, I just don't know how I should do this).

, , , () , , ". , DOM node.

+5
2

, .

, bootstrap modal, template.

:

ko.bindingHandlers.modal = {
    init: function(element, valueAccessor, allBindings, vm, context) {
        var modal = valueAccessor();
        //init the modal and make sure that we clear the observable no matter how the modal is closed
        $(element).modal({ show: false, backdrop: 'static' }).on("hidden.bs.modal", function() {
            if (ko.isWriteableObservable(modal)) {
                modal(null);
            }
        });

        //template name field can accept a function to return the name dynamically
        var templateName = function() {
            var value = modal();
            return value && value.name;
        };

        //a computed to wrap the current modal data
        var templateData = ko.computed(function() {
            var value = modal();
            return value && value.data;
        });

        //apply the template binding to this element
        ko.applyBindingsToNode(element, { template: { 'if': modal, name: templateName, data: templateData } }, context);

        //tell KO that we will handle binding the children (via the template binding)
        return { controlsDescendantBindings: true };
    },
    update: function(element, valueAccessor) {
        var data = ko.utils.unwrapObservable(valueAccessor());
        //show or hide the modal depending on whether the associated data is populated
        $(element).modal(data ? "show" : "hide");
    }
};

, :

<div class="modal hide fade" data-bind="modal: currentModal"></div>

currentModal , , name ( ) data.

, , , currentModal, . currentModal NULL, .

, : http://jsfiddle.net/rniemeyer/NJtu7/

+5

fooobar.com/questions/1154000/...:

ko.bindingHandlers.modal = {
    init: function(element, valueAccessor, allBindings, vm, context) {
        var modal = valueAccessor();

        //init the modal and make sure that we clear the observable no matter how the modal is closed
        $(element).modal({show: false}).on("hidden.bs.modal", function() {
            if (ko.isWriteableObservable(modal)) {
                modal(null);
            }
        });

        var template_computed = ko.computed({
            read: function() {
                var value = modal();
                return value ? value : {'if': false};
            },
            disposeWhenNodeIsRemoved: element
        });

        //apply the template binding to this element
        return ko.applyBindingsToNode(element, { template: template_computed }, context);
    },
    update: function(element, valueAccessor) {
        var data = ko.utils.unwrapObservable(valueAccessor());
        //show or hide the modal depending on whether the associated data is populated
        $(element).modal(data ? "show" : "hide");
    }
};

, , -

<div class="modal fade" data-bind="modal: currentModal">
</div>

- , , , , : currentModal (null)

bootstrap 3.0-rc1 knockout 2.3, :)

@rp-niemeyer !

+1

More articles:


All Articles