Observable 在提交时未刷新？ knockoutjs（提供小提琴）答案

【问题标题】：Observable not getting Refreshed on Submit ? knockoutjs(Fiddle Provided)Observable 在提交时未刷新？ knockoutjs（提供小提琴）
【发布时间】：2014-09-01 14:35:13
【问题描述】：

我有一个场景，我从 TextBox 中选择的日期在我的提交按钮单击的警报窗口中的文本框中的日期更改（日期选择器）显示错误。

在初始按钮单击时，您可以在警报中看到输出，但稍后如果您更改日期，您将获得与第一个实例相同的日期。 observable 没有被刷新

小提琴链接： : http://jsfiddle.net/JL26Z/24/

非常感谢任何解决方法

【问题讨论】：

标签： knockout.js

【解决方案1】：

您遇到的主要问题是您没有为值更改添加任何回调，因此淘汰赛无法更新可观察对象 - 因为其中的值不会更改。下面是我前一段时间在我的一个项目中使用的datepicker 绑定处理程序。它很小而且很简单，但应该能胜任：

(function ($, ko) {
    ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            // initialize datePicker with options (not required)
            var options = allBindingsAccessor().datepickerOptions || {};
            $(element).datepicker(options);

            // change date handler
            ko.utils.registerEventHandler(element, "change", function () {
                var observable = valueAccessor();
                observable($(element).datepicker("getDate"));
            });
        },
        update: function (element, valueAccessor) {
            // update date value
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).datepicker("setDate", value);
        }
    }
})(jQuery, ko);

重要提示：它适用于日期，而不是字符串。因此，在您的视图模型中，您应该使用日期，如下所示：

...
self.Date = ko.observable(new Date('2014-06-03T00:00:00'));//before formatting
...

标记现在应该是这样的：

<input type="text" data-bind="datepicker: Date"  />

您也可以像这样添加日期选择器选项：

<input type="text" data-bind="datepicker: Date, datepickerOptions: {...}"  />

这里是完整的工作demo。

【讨论】：

再次感谢您提供一些方法。好吧，我对上面的代码有一些小疑问。 (function ($, ko) 和 (jQuery, ko); 的作用是什么？您使用 registerEventHandler 是用于回调和更新 observable 的 observable($(element).datepicker("getDate")); 。谢谢
这里有 2 个问题和 2 个答案：1 - (function ($, ko) 和 (jQuery, ko); 被认为是为您的代码创建单独范围的好习惯，独立于您在其他中拥有的其他 JavaScript 代码文件 - 您只需将所有外部对象（jQuery 和敲除）作为参数传递，因此您不必担心内部某些脚本是否会将 $ 从 jQuery 更改为其他对象（并且您的脚本将停止工作）。 2 - ko.utils.registerEventHandler 只是一种注册事件处理程序的“淘汰”方式，你可以在这里使用 jQuery，它应该完全一样。
好一个。我会检查文档以进一步掌握。谢谢你，非常感谢你

【解决方案2】：

您正在尝试从可观察函数获取日期，而不是数组

试试这个。

它会显示时间

alert(self.PhoneList()[0].Date());

在这种情况下，我们从 observable 数组中获取数组并显示第一项 Date 属性

【讨论】：

好吧，现在尝试更改文本框中的日期并单击提交，您可以观察到您得到的是旧数据而不是新数据。我主要想摆脱它。欢呼
我在这里得到了这个 PhoneList 数组中的第一个值。如果你在谈论你应该从 PhoneList 取最后一个对象
实际上它的可观察数组你可以检查 fiddle 。好吧，我试过了，它什么也没做，只是继续让我得到旧的价值。我建议尝试一下小提琴#updated