可观察到的提交时没有刷新吗? Knockoutjs(提供提琴) [英] Observable not getting Refreshed on Submit ? knockoutjs(Fiddle Provided)

问题描述

好吧，我有一个方案，当我单击提交按钮时，在我的警报窗口的文本框中更改日期(datepicker)时，从TextBox中选择的日期显示错误.

Well i have a scenario where my selected date from TextBox is displaying wrong on change of date(datepicker) in textbox in my alert window on my submit button click .

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

On-initial button click you can see the output in alert but later if you change date you will get same date what you got in the 1st instance. observable is not getting refreshed

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

任何解决方法都值得赞赏

Any workaround is much appreciated

推荐答案

您遇到的主要问题是您没有在值更改中添加任何回调，因此敲除方法无法更新可观察值-因为其中的值它没有改变.以下是我前一段时间在我的一个项目中使用的datepicker绑定处理程序.它虽然很小而且非常简单，但是应该可以完成工作:

The main issue you have is that you're not adding any callback to value changes, so there is no way knockout will update the observable - because the value inside it doesn't change. Below is my datepicker binding handler I used some time ago in one of my projects. It's small and very simple, but should do the job:

(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);

重要说明:它适用于日期，而不适用于字符串.因此，在您的视图模型中，您应该使用日期，例如:

Important note: it works with dates, not strings. So in your view model you should use dates, like this:

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

现在标记应如下所示:

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

您还可以添加以下日期选择器选项:

You could also add datepicker options like this:

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

这里可以正常工作演示.

这篇关于可观察到的提交时没有刷新吗? Knockoutjs(提供提琴)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！