KnockoutJS日期时间选择器在可观察数组中

KnockoutJS datetime picker in observable array

本文关键字：观察 数组 日期 时间 选择器 KnockoutJS      更新时间：2023-09-26

我正在尝试使用敲除创建一个页面，该模型包含一个可观察的数组。每个数组项中的一个属性是日期，我正在尝试使用jquery-ui-datepicker。

我在这个问题中找到了一个用于日期选择器的自定义绑定处理程序的示例。然而，当我试图在代码中使用它时，在更改事件处理程序中出现了一个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"));时，我收到一个错误，说"Function expected"。我对knockoutjs还很陌生，我不知道为什么会出现这个错误，有人能解释一下吗？

您需要将数组的内容封装到具有可观察属性的视图模型中。像这样的东西可能会起作用：

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，它是一个函数。

相关文章：