使用淘汰赛js显示和检索日期

Posted 2023-03-27

【中文标题】使用淘汰赛js显示和检索日期

【英文标题】：Display and Retrieve date using knockout js

【发布时间】：2013-12-27 09:06:14

【问题描述】：

我只是想使用淘汰赛 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 is not a function observable($el.datepicker("getDate"));

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

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

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

谢谢，

【问题讨论】：

你所说的视图模型实际上是一个绑定。您的视图模型是您致电 ko.applyBindings( something ) 的地方 - 您也可以向我们展示这部分吗？

这篇文章有帮助吗？ ***.com/questions/20340196/…

这是我的完整视图模型：

【参考方案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());