1

我有一个向导包含 4 个步骤，它可以正常工作，但是当我在第 2 步添加 Jquery 的 datepicker 时，如果我刷新浏览器，日期选择器不会显示（只是输入类型的文本显示），但我会丢失步骤的信息1（如果我刷新浏览器），我该如何解决我的问题，

我的向导是这样的：http: //jsfiddle.net/FyuSD/36/

向导.cshtml：

....
<script id="step1" type="text/html">    
 <div>Name: <input type="text" data-bind="value: Name"></div>
 <div>Description: <input type="text" data-bind="value: Description"></div>
</script>

<script id="step2" type="text/html">
  Start: <br/><input type="text" id="from"  data-bind="value: StartDate">
  Stop:<br/> <input type="text" id="to" class="required" data-bind="value: EndDate">
</script>
.....

日期选择器.js：

 $(function () {
  $("#from").datepicker({
    showOn: "button",
    buttonImage: "/Content/images/calendar.gif",
    buttonImageOnly: true,
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});
$("#to").datepicker({
    showOn: "button",
    buttonImage: "/Content/images/calendar.gif",
    buttonImageOnly: true,
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    }
});
});

我很抱歉我的英语不好

谢谢，

4

1 回答 1

0

我玩了一下小提琴，你的解决方案就是这个问题的答案

KnockoutJS 未捕获 jQuery UI 日期选择器更改事件

其中显示了用于自定义绑定的日期选择器实现，如淘汰文档中所述：Knockout - Custom Bindings

您需要创建一个自定义绑定处理程序，该处理程序将在呈现模板时初始化您的日期选择器。

    // call this before you call ko.applyBindings()
    ko.bindingHandlers.datepicker = {
         init: function(element, valueAccessor, allBindingsAccessor) {
             // initialize here
         },
         update: function(element, valueAccessor, allBindingsAccessor) {
             // change handler here
         }
    };

当您声明数据绑定时，请使用自定义绑定的名称（而不是“值：StartDate”）

    <br/>
    Start :<input type="text" id="from" data-bind="datepicker: StartDate, datepickerOptions: {onSelect: $root.onSelectStartDate()}" /> 
    <br/>
    End :<input type="text" id="to" data-bind="datepicker: EndDate, datepickerOptions: {onSelect: $root.onSelectEndDate()}" />

当然$root是指您的 ViewModel 类，这意味着您需要一些方法。这是您可以放置​​ minDate 和 maxDate 代码的地方。

    function ViewModel() {

        // ...

        self.onSelectStartDate = function() {
            return function() {
                alert("Start Date selected");
            };
        };

        self.onSelectEndDate = function() {
            return function() {
                alert("End Date selected");
            };
        };
    };

我在http://jsfiddle.net/carbontax/bwA4N/5/的更新小提琴中对其进行了测试。它看起来很有趣，因为 datepicker css 不可用，但绑定处理程序正在做正确的事情。

于 2012-08-04T16:43:29.263 回答