Question

我要做的是创建一个DOM节点，使用ko.renderTemplate渲染模板，覆盖创建的节点，然后在该模板中，两者都能够从viewModel $ root获取特定模型和数据的数据。

例如：

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

模板看起来像：

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

在这种情况下，我没有从$ root.DataFromViewModelRoot获取任何数据，因为它认为$ root-data是ModelData（我理解为什么，我只是不知道应该怎么做）。

我想要完成的是我需要从模板创建一个模态窗口（bootstrap），然后我希望能够根据我发送的数据在该模式中显示不同的内容进去”。我还需要能够创建多个模态，这就是我需要创建一个新DOM节点的原因。

Answer 1

这与您的具体问题略有不同，但这是使用引导模式的另一种方法。

您可以使用自制绑定来包装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's 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为空，则关闭模态。

以下是有关其工作原理的示例：http://jsfiddle.net/rniemeyer/NJtu7/

Answer 2

我有一个改进的https://stackoverflow.com/a/16160300/2630724版本要分享：

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 observable打开一个对话框，然后通过将其清零来关闭对话框：currentModal（null）

我在那里使用bootstrap 3.0-rc1 knockout 2.3，它允许计算模板名称：）

感谢@ rp-niemeyer发布此内容！

Knockoutjs将模型绑定到使用ko.renderTemplate创建的模板

2 个答案: