淘汰赛向导+ Jquery的

Question

我有一个向导包含4步与淘汰赛其做工精细，但是当我加入日期选择器的jQuery的步骤2日期选取器不显示（只是一个输入类型文本显示），如果我刷新我的浏览器，它显示，但我失去了第1步的信息（如果我刷新我的浏览器），我怎么能解决我的问题，

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

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

其中显示了在淘汰赛中描述的自定义绑定的日期选择器实现文档：Knockout - Custom Bindings

您需要创建一个自定义绑定处理程序时的模板被渲染，这将初始化datepickers。

// 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 
     } 
    }; 

当你宣布你的数据绑定使用自定义绑定的名称（而不是“值：起始日期”）

<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是指您的视图模型类，因此，这意味着你需要一些方法。这是你可以放置你的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不可用，但绑定处理程序正在做正确的事情。