我正在使用 knockout.js 来显示员工列表。我在页面上有一个隐藏的模态标记。单击单个员工的“详细信息”按钮时，我想将该员工数据绑定(bind)到模式弹出窗口。我正在使用 ko.applyBindings(employee, element) 但问题是当页面加载时，它期望模态开始时绑定(bind)到某些东西。

所以我想知道，是否有进行延迟/延迟数据绑定(bind)的技巧/策略？我查看了虚拟绑定(bind)，但文档的帮助不够。

谢谢!

最佳答案

我想提出一种在 MVVVM 中使用模态的不同方法。在 MVVM 中，ViewModel 是 View 的数据，而 View 负责 UI。如果我们检查这个提案:

this.detailedEmployee = ko.observable({}),

var self = this;
this.showDetails = function(employee){
    self.detailedEmployee(employee);
    $("#dialog").dialog("show"); //or however your dialog works
}

我非常同意 this.detailedEmployee = ko.observable({})，但我非常不同意这一行:$("#dialog").dialog("显示");。这段代码放在 ViewModel 中并显示模态窗口，实际上这是 View 的责任，所以我们搞砸了 MVVM 方法。我会说这段代码将解决您当前的任务，但它可能会在未来引起很多问题。

• 关闭弹出窗口时，您应该将 detailedEmployee 设置为 undefined 以使您的主 ViewModel 处于一致状态。
• 关闭弹出窗口时，您可能希望进行验证，并在您希望在应用程序中使用另一个模式的组件时放弃关闭操作

对于我来说，这几点非常关键，所以我想提出一个不同的方式。如果我们“忘记”您需要在弹出窗口中显示数据，将 与 绑定(bind)可以解决您的问题。

this.detailedEmployee = ko.observable(undefined);
var self = this;
this.showDetails = function(employee){
    self.detailedEmployee(employee);
}

<div data-bind="with: detailedEmployee">
Data to show
</div>

如您所见，您的 ViewModel 对如何数据应该如何显示一无所知。它只知道应该显示的数据。 with 绑定(bind)将仅在定义了 detailedEmployee 时显示内容。接下来，我们应该找到一个类似于 with 的绑定(bind)，但它会在弹出窗口中显示内容。我们将其命名为 modal。它的代码是这样的:

ko.bindingHandlers['modal'] = {
    init: function(element) {
        $(element).modal('init');
        return ko.bindingHandlers['with'].init.apply(this, arguments);
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var returnValue = ko.bindingHandlers['with'].update.apply(this, arguments);

        if (value) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }

        return returnValue;
    }
};

如您所见，它在内部使用 with 插件，并根据传递给绑定(bind)的值显示或隐藏弹出窗口。如果已定义 - '显示'。如果不是-“隐藏”。它的用法如下:

<div data-bind="modal: detailedEmployee">
    Data to show
</div>

您唯一需要做的就是使用您最喜欢的模态插件。我用 Twitter Bootstrap 弹出组件准备了一个示例:http://jsfiddle.net/euvNr/embedded/result/

在这个例子中，自定义绑定(bind)更强大一点；您可以订阅 onBeforeClose 事件并在需要时取消此事件。希望这会有所帮助。

关于javascript - knockout.js - 模态的延迟数据绑定(bind)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10626780/