Question

我无法使用从datepicker继承的值填充observableArray。我有一个禁用的文本框，显示datepicker的值作为数据收集部分的一部分。因为它被禁用而没有输入，所以它不会更新observableArray。

我创建了一个example jsfiddle，我已将其删除并对问题进行了本地化。

任何有助于将值显示在observableArray中的帮助都会很棒，因为我真的很难想出这个值！

HTML

moment.locale('en-gb');

function WardStaff(data) {
    var self = this;
    self.Date = ko.observable(data.Date());
    self.Status = ko.observable(data.Status());
};

function oWardStaff() {
    var self = this;
    self.Date = ko.observable();
    self.Status = ko.observable();
};

var viewModelWardStaff = function () {

    var self = this;

    self.wardstaff = new oWardStaff();

    self.dateMonthYear = ko.observable();

    self.entries = ko.observableArray([]);

    self.addEntry = function () {
        self.entries.push(new WardStaff(self.wardstaff));
    }

    self.removeEntry = function (entry) {
        self.entries.remove(entry);
    }
};

// dateString knockout
ko.bindingHandlers.dateString = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor(),
            allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        var pattern = allBindings.datePattern || 'YYYY-MM-DD HH:mm:ss';
        if (valueUnwrapped == undefined || valueUnwrapped == null) {
            $(element).text("");
        }
        else {
            var date = moment(valueUnwrapped, "YYYY-MM-DDTHH:mm:ss"); //new Date(Date.fromISO(valueUnwrapped));
            $(element).text(moment(date).format(pattern));
        }
    }
}

//datepicker knockout
ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);
        //WORK
        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();

            if (moment($(element).datepicker("getDate")).local().format('YYYY-MM-DD') == 'Invalid date') {
                observable(null);
            }
            else {
                observable(moment($(element).datepicker("getDate")).local().format('YYYY-MM-DD'));
            }

        });

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

    },
    //update the control when the view model changes
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        current = $(element).datepicker("getDate");

        if (moment(value).format('DD/MM/YYYY') == 'Invalid date') {
            $(element).datepicker("setDate", null);
        }

    }
};

// Master View Model
var masterVM = function () {
    var self = this;

    self.viewModelWardStaff = new viewModelWardStaff();

};

// Activate Knockout
ko.applyBindings(masterVM);

KnockoutJS

org.xml.sax.SAXParseException; systemId: file:/thefile.xsd; lineNumber: 13; columnNumber: 25; cos-nonambig: "namespace":CellNumber and "namespace":CellNumber (or elements from their substitution group) violate "Unique Particle Attribution". During validation against this schema, ambiguity would be created for those two particles.

Answer 1

我认为问题在于您的可观察日期dateMonthYear存在于主视图模型中。 <{1}}的{{1}}属性永远不会设置。

您可以通过将主视图模型中的observable与Date属性中的observable共享来解决此问题：

self.wardstaff

现在，无论何时选择新日期，它都会将其写入两个viewmodels引用的observable。

这条线突然变得有用了：

wardstaff

因为function oWardStaff(obsDate) { var self = this; self.Date = obsDate; self.Status = ko.observable(); }; /* ... */ self.dateMonthYear = ko.observable(); self.wardstaff = new oWardStaff(self.dateMonthYear);现在已经确定了。

我认为现在可以正常工作：https://jsfiddle.net/n0t91sra/ （如果我错过了其他一些想要的行为，请告诉我）

Knockout observableArray没有被继承的datepicker值填充

1 个答案: