可觀察數組中的KnockoutJS日期時間選擇器

Question

我正在嘗試使用敲除來創建頁面，該模型包含一個可觀察的數組。 每個數組項中的屬性之一是日期，我正在嘗試使用jquery ui datepicker。

我在此問題中找到了一個用於日期選擇器的自定義bindingHandler的示例。 但是，當我嘗試在代碼中使用它時，在change事件處理程序中出現了JavaScript錯誤。

我的簡化代碼：

<table>
    <thead>
        <tr>
            <th>My Date</th>
        </tr>
    </thead>
    <tbody data-bind='foreach: visits'>
        <tr>
            <td><input data-bind='datepicker: MyDate' /></td>
        </tr>
     </tbody>
</table>

<script type="text/javascript">
    ko.bindingHandlers.datepicker = {
        init: function(element, valueAccessor, allBindingsAccessor) {
           $(element).datepicker({ dateFormat: 'dd/mm/yy' });

           //handle the field changing
           ko.utils.registerEventHandler(element, "change", function() {
               //get the value accessor
               var observable = valueAccessor();

               //assign the observable value - code breaks here with 'Function expected'
               observable($(element).datepicker("getDate"));
            });

            //handle disposal (if KO removes by the template binding)-
            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                $(element).datepicker("destroy");
            });

        },
        update: function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());

            //handle date data coming via json from Microsoft
            if (String(value).indexOf('/Date(') == 0) {
                value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
            }

            var current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                $(element).datepicker("setDate", value);
            }
        }
    };

    var VisitModel = function(visits) {
        var self = this;
        self.visits = ko.observableArray(visits);

        self.getVisitsJSON = function() {
            return ko.utils.stringifyJson(self.visits);
        }
     };

     var visitModel = new VisitModel([{"MyDate":"01/01/2013"}]);
     ko.applyBindings(visitModel);
</script>

就像我代碼中的注釋一樣，當我調用observable($(element).datepicker("getDate"));時，我收到一條錯誤消息，提示“功能預期” observable($(element).datepicker("getDate")); 。 我對敲除js很陌生，我不確定為什么會收到此錯誤，有人可以幫忙解釋一下嗎？

Answer 1

您需要將數組的內容包裝到具有可觀察屬性的自己的視圖模型中。 這樣的事情可能會起作用：

var VisitModel = function(visits) {
    var self = this;
    self.visits = ko.observableArray();

    for (var i = 0; i < visits.length; i++) {
        self.visits.push(new DateModel(visits[i]);
    }

    self.getVisitsJSON = function() {
        return ko.utils.stringifyJson(self.visits);
    }
 };

 var DateModel = function(date) {
     var self = this;
     self.MyDate = ko.observable(date.MyDate);
 }

 var visitModel = new VisitModel([{"MyDate":"01/01/2013"}]);
 ko.applyBindings(visitModel);

現在，當您使用valueAccessor您應該返回ko.observable這是一個函數。