淘汰賽嚮導+ 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不可用，但綁定處理程序正在做正確的事情。