Question

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

wizard.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>
.....

DatePicker.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);
    }
});
});

我很抱歉我的英语不好

谢谢，

Answer 1

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

jQuery UI datepicker change event not caught by KnockoutJS

其中显示了自定义绑定的datepicker实现，如淘汰文档中所述：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
         }
    };

声明数据绑定时，请使用自定义绑定的名称（而不是“value：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不可用，但绑定处理程序正在做正确的事情。

淘汰精灵+ Jquery

1 个答案: