knockout.js - 模态的延迟数据绑定？

Question

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

所以我想知道,有一个技巧/策略来做延迟/延迟数据绑定吗？我查看了虚拟绑定,但文档不够有用.

谢谢!

Answer 1

我想提出一种不同的方式来处理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("show");.这段代码放在ViewModel中并显示模态窗口,其中它是View的职责,因此我们搞砸了MVVM方法.我会说这段代码将解决你当前的任务,但它可能会在未来引起很多问题.

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

至于我,这些要点非常关键,所以我想提出一个不同的方法.如果我们"忘记"您需要在弹出窗口中显示数据,绑定with可以解决您的问题.

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结合将只显示当内容detailedEmployee被定义.接下来,我们应该找到一个类似with但只能在弹出窗口中显示内容的绑定.我们给它起名字吧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内部使用插件,并根据传递给绑定的值显示或隐藏弹出窗口.如果定义 - 'show'.如果不是 - '隐藏'.它的用法如下:

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

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

在此示例中,自定义绑定功能更强大; 您可以订阅onBeforeClose事件并在需要时取消此事件.希望这可以帮助.

Answer 2

我将创建另一个包含员工的可观察对象。

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

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

将单击附加到showDetails. 然后你就可以在页面加载时调用applyBindings。