我在使用 knockout 将日期值绑定(bind)到文本框时遇到问题，如下图所示

第一次加载页面时，我使用 ajax 获取 AccountStatements 数据。

function AccountStatementViewModel(companyID) {
    var self = this;
    ...
    var AccountStatement = {
        AccountStatementID: self.AccountStatementID,
        CompanyID: self.CompanyID,
        Description: self.Description,
        Amount: self.Amount,
        ReceiptDate: self.ReceiptDate,
        Type: self.Type
    }

    self.AccountStatement = ko.observable();
    self.AccountStatements = ko.observableArray();

    $.ajax({
        url: webroot + 'AccountStatement/GetAccountStatements',
        contentType: 'application/json; charset=utf-8',
        data: { id: self.CompanyID },
        cache: false
    }).done(function (data) {
        self.AccountStatements(data);
    });
    ...
    self.edit = function (accountStatement) {
        $('#lnkAddAccountStatement').hide('blind', 1000);
        $('#pnlAddEditAccountStatement').show('blind', 1000);
        self.AccountStatement(accountStatement);
    }
    ...
}

Controller以json格式返回结果:

public JsonResult GetAccountStatements(int id)
{
    var accountStatementsVM = db.AccountStatements
        .Where(a => a.CompanyID == id)
        .Select(a => new AccountStatementViewModel
        {
            AccountStatementID = a.AccountStatementID,
            CompanyID = a.CompanyID,
            Description = a.Description,
            Amount = a.Amount,
            ReceiptDate = a.ReceiptDate,
            Type = a.Type
        })
        .ToList();

    return Json(accountStatementsVM, JsonRequestBehavior.AllowGet);
}

结果是:

[{"AccountStatementID":2,"CompanyID":1,"Description":"test","Amount":1000,"ReceiptDate":"/Date(1447261200000)/","Type":"Payment"}]

在 View 中，我使用以下代码显示它:

<tbody data-bind="foreach: AccountStatements, visible: AccountStatements().length > 0">
    <tr>
        <td data-bind="attr: { id: AccountStatementID }">
            <a href="#" class="btn btn-primary btn-xs" data-bind="click: $root.edit"><i class="glyphicon glyphicon-pencil"></i></a>
            <a href="#" class="btn btn-danger btn-xs" data-bind="click: $root.delete"><i class="glyphicon glyphicon-remove"></i></a>
        </td>
        <td data-bind="text: Description"></td>
        <td data-bind="text: Amount"></td>
        <td data-bind="date: ReceiptDate"></td>
    </tr>
</tbody>

这是格式化日期的代码:

ko.bindingHandlers.date = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
        var textContent = moment(valueUnwrapped).format("DD/MM/YYYY");
        ko.bindingHandlers.text.update(element, function () { return textContent; });
    }
};

在这一步，日期以正确的格式显示，然后如果我点击编辑按钮，文本框中的 ReceiptDate 没有格式化。

ReceiptDate 文本框的代码:

<input type="text" placeholder="Enter Receipt Date" class="form-control fdatepicker" readonly="readonly" data-bind="value: AccountStatement().ReceiptDate" />

如果我更改为 data-bind="date: AccountStatement().ReceiptDate"，文本框将为空。

如何格式化文本框中的日期？

更新

我已经更改了日期绑定(bind)处理程序，如此 link但 ReceiptDate 的 TextBox 值仍然是 /Date(1447261200000)/

View 的变化:

<input type="text" placeholder="Enter Receipt Date" class="form-control fdatepicker" readonly="readonly" data-bind="date: AccountStatement().ReceiptDate" />

表中的收货日期变为空:

<td data-bind="date: ReceiptDate"></td>

最佳答案

进行自定义出价有点矫枉过正。您的自定义绑定(bind)没有做任何值得自定义绑定(bind)的事情。

您所需要的只是一个返回当前日期文本格式的计算可观察对象。

假设您在某处有这个变量:

var myDate = ko.observable();

在某处你有代码将一些日期对象放入其中:

myDate( input ); // where input is some date object you got somehow from somewhere

现在你需要的是:

myDate.formatted = ko.pureComputed(function() {
    return moment(myDate()).format("DD/MM/YYYY");
});

现在您可以使用普通的文本绑定(bind):

(假设您在绑定(bind)到此 View 的 View 模型中有 myDate)

<td data-bind="text: myDate.formatted"></td>

注意:

myDate.formatted 没有什么特别之处。如果您考虑一下，myDate 只是一个函数，而函数是对象，因此您可以将任意字段附加到它们。

这与像这样创建一个新变量真的没有什么不同:

var myFormattedDate = ko.pureComputed(function() {
    return moment(myDate()).format("DD/MM/YYYY");
});

并在绑定(bind)中使用它:

<td data-bind="text: myFormattedDate"></td>

关于javascript - 使用 Knockoutjs 的绑定(bind)日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33687403/