Question

我只想使用knockout JS显示和检索日期。以下是我的JSON和HTML代码：

{"PropertyID":1,"ExpenseTypeID":1,"ExpenseDate":"\/Date(1386638350997)\/","Amount":234.4,"Property":null,"ExpenseType":null,"ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null}

HTML：

<input id="StartDate" data-bind="datepicker: ExpenseDate" />

视图模型

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

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $el.datepicker("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element),
            current = $el.datepicker("getDate");
        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

我更改了代码行

var observable = valueAccessor() to var observable = valueAccessor;

因为否则当我想从datepicker设置日期时我遇到了一个问题。错误是

TypeError：observable不是一个可观察的函数（$ el.datepicker（“getDate”））;

通过更改此行代码，我可以设置日期，但在我想保存数据时无法检索它。我也尝试使用self.SelectedDate = ko.observable("");和

<input id="StartDate" data-bind="value: $root.SelectedDate" />

但没有运气。任何人都可以帮助我怎么做。

谢谢，

Answer 1

Here is complete view model

var ExpenseViewModel = function () {
    var self = this;

    self.ID = ko.observable("");
    self.Name = ko.observable("");
    self.ExpenseTypeID = ko.observable("");
    self.PropertyID = ko.observable("");
    self.Amount = ko.observable("");
    self.ExpenseDate = ko.observable("");

    self.SelectedPropertyID = ko.observable("");
    self.SelectedValue = ko.observable("");

    self.SelectedDate = ko.observable("");

    var url = "/Expense/GetExpenses";
    var refresh = function () {
        ShowFixedWait();
        $.getJSON(url, {}, function (data) {
            self.Expenses(data);
            $("#formAddExpense").fadeOut('slow');
            // $("#btnAddProperty").show();
            HideWait();
        });
    };

    var Expense = {
        ID: self.ID,
        Name: self.Name,
        ExpenseTypeID: self.ExpenseTypeID,
        PropertyID: self.PropertyID,
        Amount: self.Amount,
        SelectedPropertyID: self.SelectedPropertyID,
        ExpenseDate: self.ExpenseDate
    };

    // Public data properties
    self.Expense = ko.observable();
    self.Expenses = ko.observableArray([]);
    self.Properties = ko.observableArray([]);
    self.ExpenseTypes = ko.observableArray([]);

    // Public operations
    self.createExpense = function () {
        $("#formAddExpense").fadeIn('slow');
        $("#expenseList").fadeOut('slow');
        $("#formEditExpense").fadeOut('slow');

        var propertyURL = "/Property/GetProperties";
        $.getJSON(propertyURL, {}, function (data) {
            self.Properties(data);
        });

        var expenseTypeURL = "/ExpenseType/GetExpenseTypes";
        $.getJSON(expenseTypeURL, {}, function (data) {
            self.ExpenseTypes(data);
        });

      //  self.SelectedValue = expense.ExpenseTypeID;

        self.Expense(Expense);
    };

    self.Cancel = function () {
        $("#expenseList").fadeIn('slow');
        $("#divBtnAddExpense").fadeIn('slow');
        $("#formAddExpense").fadeOut('slow');
        $("#formEditExpense").fadeOut('slow');

    };

    self.editExpense = function (expense) {
        $("#formEditExpense").fadeIn('slow');
        $("#expenseList").fadeOut('slow');
        $("#formAddExpense").fadeOut('slow');
        $("#divBtnAddExpense").fadeOut('slow');

        var propertyURL = "/Property/GetProperties";
        $.getJSON(propertyURL, {}, function (data) {
            self.Properties(data);
        });

        var expenseTypeURL = "/ExpenseType/GetExpenseTypes";
        $.getJSON(expenseTypeURL, {}, function (data) {
            self.ExpenseTypes(data);
        });

        self.SelectedPropertyID = expense.PropertyID;
        self.SelectedValue = expense.ExpenseTypeID;

       // alert(ParseJsonDateString(expense.ExpenseDate));
        expense.ExpenseDate = ParseJsonDateString(expense.ExpenseDate);
     //   self.SelectedDate = "12-12-2013";
        self.Expense(expense);
    };

    self.removeExpense = function (expense) {
        if (confirm("Are you sure you want to delete this expense?")) {
            var ID = expense.ID;
            //waitingDialog({});
            ShowFixedWait();
            var model =
             {
                 ID: ID
             }

            $.ajax({
                type: "POST",
                url: "/Expense/DeleteExpense",
                data: JSON.stringify(model, null, 2),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () { self.Expenses.remove(expense); },
                error: function (err) {
                    var error = JSON.parse(err.responseText);
                    $("<div></div>").html(error.Message).dialog({ modal: true, title: "Error", buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
                },
                complete: function () {
                    //closeWaitingDialog();
                    HideWait();
                }
            });
        }
    };

    self.updateExpense = function () {

        ShowFixedWait();
        self.Expense().PropertyID = self.SelectedPropertyID;
        self.Expense().ExpenseTypeID = self.SelectedValue;
       // alert(JSON.stringify(self.SelectedDate));
        $.ajax({
            type: "POST",
            url: "/Expense/SaveExpenseInformation",
            data: JSON.stringify(self.Expense(), null, 2),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Expenses.removeAll();
                self.Expenses(data); //Put the response in ObservableArray
                self.Expense(null);
                $("#expenseList").fadeIn('slow');
                $("#divBtnAddExpense").fadeIn('slow');
                $("#formAddExpense").fadeOut('slow');
                $("#formEditExpense").fadeOut('slow');

                //  $("<div></div>").html("Data has been saved successfully.").dialog({ modal: true, title: "Info", buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
            },
            error: function (err) {
                var error = JSON.parse(err.responseText);
                $("<div></div>").html(error.Message).dialog({ modal: true, title: "Error", buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
            },
            complete: function () {
                //closeWaitingDialog();
                HideWait();
            }
        });
    };

    self.addExpense = function () {
        ShowFixedWait();
        self.Expense().PropertyID = self.SelectedPropertyID;
        self.Expense().ExpenseTypeID = self.SelectedValue;
        $.ajax({
            type: "POST",
            url: "/Expense/SaveExpenseInformation",
            data: ko.toJSON(Expense),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Expenses.removeAll();
                self.Expenses(data); //Put the response in ObservableArray
                self.Expense(null);
                $("#expenseList").fadeIn('slow');
                $("#divBtnAddExpense").fadeIn('slow');
                $("#formAddExpense").fadeOut('slow');
                $("#formEditExpense").fadeOut('slow');
                //  $("<div></div>").html("Data has been saved successfully.").dialog({ modal: true, title: "Info", buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
            },
            error: function (err) {
                var error = JSON.parse(err.responseText);
                $("<div></div>").html(error.Message).dialog({ modal: true, title: "Error", buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
            },
            complete: function () {
                HideWait();
                //closeWaitingDialog();
            }
        });
    };

    refresh();
};

ko.bindingHandlers.textualDate = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
        var textContent = moment(valueUnwrapped).format("MMM Do YY");
        ko.bindingHandlers.text.update(element, function () { return textContent; });
    }
};

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var $el = $(element);

        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $el.datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

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

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element),
            current = $el.datepicker("getDate");

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

ko.applyBindings(new ExpenseViewModel());

使用knockout js显示和检索日期

1 个答案: