更新以编程方式填充输入的淘汰赛绑定？答案

【问题标题】：Updating knockout bindings for programatically populated inputs?更新以编程方式填充输入的淘汰赛绑定？
【发布时间】：2013-11-24 18:34:06
【问题描述】：

我正在使用一个日期选择器，每当我从日历中选择日期时，它就会将一些文本推送到输入中。

我还通过第三方工具填充了其他一些输入实例。

问题是，在重新绑定发生之前，我必须在输入填充后按一些键。如果我不这样做，那么 observable 就不会更新。

类似问题：knockout valueUpdate not working with Pagedown?

有没有办法手动重新绑定元素，这样当我按下“保存”时，这些可观察对象可以准确绑定？

【问题讨论】：

日期选择器如何更新输入元素？ datepicker 元素是否绑定到可观察到的淘汰赛？可以发一些代码吗？？？谢谢。
@VinneyKelly 这是一个示例：jsfiddle.net/BcuLq 这是使用 pagedown，但日期选择器遇到了同样的问题。如果您单击任何菜单按钮来更改文本，则在您手动输入内容之前，observable 不会更新。

标签： knockout.js

【解决方案1】：

作为 @ebohlman 所说的一个例子，

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor) {
        var $el = $(element), value = valueAccessor;
        $el.datepicker({ 
            value: ko.unwrap(value),
            onChange: function(newValue){
                if (ko.isObservable(value)) {
                    value(newValue);
                }
            }
        });

        if (ko.isSubscribable(value)){
            value.subscribe(function(){
                $el.datepicker("set value", ko.unwrap(value));
            });
        }
    }
}

（这是使用 Semantic-UI 的模块模式，您的插件的 API 可能会有所不同）

【讨论】：

我只是回到帖子提交这个（嗯，不完全是......那会很可怕）。 KO + bindingHandlers + 模板 = UI 忍术！

【解决方案2】：

通常，您需要创建一个自定义绑定，该绑定使用小部件提供的任何通知 API（尽管首先检查是否其他人尚未创建）。这实际上相当容易； Knockout 的创建者认为编写自定义绑定是使用 Knockout 的常规方面（正如 Angular 的创建者认为编写自己的指令是使用它的常规方面）。确切的细节取决于特定的小部件。

这是必要的原因是 Knockout 对输入元素的本机绑定会监听 change 和 keypress 等浏览器事件。但是，当输入元素以编程方式更改时，浏览器不会自动发出事件，因此绑定不知道发生了什么。

【讨论】：