Question

今天我遇到了一个knockoutjs代码，其中有一个复选框，当用户检查它时，jquery对话框打开，当取消选中它然后关闭对话框。我仔细阅读代码，了解它是如何工作的，但有一个方面尚不清楚。

这是HTML

<input type="checkbox" data-bind="checked: showDialog" /> Show dialog
<!-- ko template: { if: showDialog, name: 'dialogView' } -->
<!-- /ko -->
<script id="dialogView" type="text/html">
    <div style="display:none" data-bind="dialog: { title: 'Title' }"><p>Some text</p></div>
</script>

这里是完整的js代码

ko.bindingHandlers.dialog = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};
        var dialog;

        //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom
        setTimeout(function() {
            var dlgOptions = { 
                autoOpen: true, 
                close: function(event, ui){
                    $(this).remove();
                }
            };            
            $.extend(dlgOptions, options);

            dialog = $(element).clone().dialog(dlgOptions);
        }, 0);

        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).dialog("destroy");
            dialog.remove();
        });
    }
};

var viewModel = {
    showDialog: ko.observable(false)
};

ko.applyBindings(viewModel);

这下面的行含义不明确

<!-- ko template: { if: showDialog, name: 'dialogView' } -->

代码试图说的是if showDialog and name is dialogView ?

单击复选框，然后单击一个函数调用打开对话框，当取消选中复选框时，再次调用一个函数调用哪个关闭对话框。我发现没有任何功能与复选框打开和关闭对话框相关联，但是在选中和取消选中复选框时，对话框是打开和关闭的。

请在检查和取消选中复选框时帮助我了解对话框的打开和关闭方式。从这个jsfiddle链接，任何人都可以看到完整的代码 http://jsfiddle.net/jearles/8Cfqz/39/

寻求帮助和指导。感谢

修改

这个函数ko.bindingHandlers.dialog代码对我来说并不清楚 1）何时调用dialog函数？我想当showDialog值为真时，敲除将解析名为dialogView的模板并尝试绑定它，然后调用dialog()函数。

但dialog()函数中写的代码对我来说不是很清楚。

所以在这里我想强调几行代码点，这对我来说并不清楚。

1）这一行的含义是什么var options = ko.utils.unwrapObservable(valueAccessor()) || {};

2）为什么在这里使用setTimeout()函数？因为没有setTimeout()对话框选项可以在代码中设置。

3）以下是什么？

ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
    $(element).dialog("destroy");
    dialog.remove();
});

4）何时会调用addDisposeCallback()？

5）调用自定义绑定中的init函数时？是一次还是每次都打电话？

6）调用自定义绑定中的update函数时

我经常遇到问题，然后了解淘汰js自定义绑定功能。所以告诉我成为淘汰赛js自定义装订大师的最佳方式。

感谢

Answer 1

您是否阅读了template binding的{{3}}？

当Knockout运行时，它会解析虚拟HTML元素上的data-bind属性：

<!-- ko template: { if: showDialog, name: 'dialogView' } -->

此处data-bind属性告诉Knockout在 ShowDialog解析为true-ish值时呈现模板。

正如文件所说：


if - 如果提供此参数，则仅在以下情况下呈现模板   指定的表达式求值为true（或true-ish值）。这个   可以用于防止null observable被绑定   在填充模板之前对照模板。

这个Knockout绑定应该呈现什么？该文档告诉我们如何使用name参数：


name - 包含您要呈现的模板的元素的ID

简而言之，如果 ShowDialog返回true-ish值，那么Knockout将呈现它在name参数中引用的元素中找到的任何内容。

我希望这很清楚。

修改

回答你的问题：

1）unwrapObservable是函数的长版本，也可以使用unwrap调用。在documentation上阅读相关内容。

2）我不知道，那不是标准的淘汰赛练习。您必须询问撰写该文章的开发人员。

3）如果Knockout在页面中添加了一个元素，那么有关视图模型的数据将被隐藏在幕后;如果你从页面中删除这个元素，那么你也应该告诉Knockout删除那些幕后数据。你试过this page吗？

4）我认为，就你所关注的而言，这并不重要。

5）阅读googling "ko.utils"了解自定义绑定 - 它清楚地解释了init回调。

6）阅读documentation了解自定义绑定 - 它清楚地解释了update回调。

使用自定义绑定的

这是HTML

这里是完整的js代码

修改

1 个答案:

修改