我有以下列Defs
self.columnDefs = [
{ width: 150, field: 'timeReceived', displayName: 'Time Received', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },
{ width: 500, field: 'name', displayName: 'Name' },
{ width: 150, field: 'LinkToTimeSent', displayName: 'Time SentX', cellTemplate: '<a data-bind="text:$parent.entity.timeSent, attr: { href: $parent.entity.linkToTimeSent}" ></a>' },
];
我的问题出在 Time SentX 上。我希望它显示entity.timeSent 的内容,但使用时刻库进行转换以供人类使用。
如何从我的columnDefs中调用函数 moment($parent.entity.timeSent).format('DD/MM/YYYY h:mm a') ?
在下面的代码中,第 96 行需要包含类似的内容
text:moment($parent.entity.TimeSent, "DD/MM/YYYY h:mm a") but I can't get it to work!
最佳答案
编辑:我的回答有点太笼统了。尝试更具体。
将您的WorkflowRules
映射到它们自己的“ View 模型”,您可以做任何您喜欢的事情:
this.workflowRules = ko.observableArray(sampleData.WorkflowRules
.map(function(jsonRule) {
// Add UI helpers (create a sort of viewmodel)
var timeSentMoment = moment(jsonRule.TimeSent);
// Purely for display purposes:
jsonRule.timeSentLabel = timeSentMoment.format('DD/MM/YYYY h:mm a');
// Do what ever you want to create the right url
jsonRule.href = jsonRule.TimeSent;
return jsonRule;
}));
然后,在您的模板中:
<div data-bind="with: $parent.entity">
<a data-bind="text: timeSentLabel,
attr: {href: href}"></a>
</div>';
在js中定义:
var timeSentTemplate = '<div data-bind="with: $parent.entity"><a data-bind="text: timeSentLabel, attr: {href: href}"></a></div>';
var columnDefs = [
{ cellTemplate: timeSentTemplate, /* etc. */ }
];
我希望我终于正确地回答了你的问题......
( https://plnkr.co/edit/93ucvDLk5bUFtU4dB1vn?p=preview ,移动了一些东西)
<小时/>之前更一般的答案:
当您创建 knockout 绑定(bind)时, knockout 会自动将绑定(bind)的第二部分包装在函数中。例如:
data-bind="text: myTextObservable"
处理为:
text: function (){ return myTextObservable }
此外,knockout 使用此函数创建 compulatedObservable
。这将创建对函数内使用的任何可观察量的订阅,确保在其中任何一个发生变化时重新评估数据绑定(bind)。
这意味着在您的情况下,您可以像这样在数据绑定(bind)中定义格式规则(假设 timeSent
是一个可观察的`):
data-bind="text: moment($parent.entity.timeSent()).format('DD/MM/YYYY h:mm a') "
Knockout 将看到 timeSent
observable 被调用,并确保整个绑定(bind)得到正确更新。这是一个例子:
var date = ko.observable(new Date());
var addDay = function() {
date(moment(date())
.add(1, "day")
.toDate()
);
};
ko.applyBindings({
date: date,
addDay: addDay
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<strong>The "raw" observable</strong>
<div data-bind="text: date"></div>
<br/>
<strong>A "computed" text defined in the data-bind</strong>
<div data-bind="text: moment(date()).format('DD-MM-YY')"></div>
<button data-bind="click:addDay">add a day</button>
然而,我的建议是在 View 模型中创建一个单独的计算可观察量。毕竟,这就是 View 模型的用途,它将在修复错误时为您提供很大帮助。即:
// Add to your entity view model:
this.timeSentLabel = ko.computed(function() {
return moment(this.timeSent())
.format('DD/MM/YYYY h:mm a');
}, this);
关于javascript - knockoutjs kogrid 在单元格内显示日期 - 带 plunk,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37391025/