knockoutjs kogrid在单元格内显示日期 - 带有插件

时间:2016-05-23 12:27:38

标签: javascript knockout.js kogrid

我有以下columnDefs

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中调用函数时刻($ parent.entity.timeSent).format(&#39; DD / MM / YYYY h:mm a&#39;)?

在下面的插件中,第96行需要包含类似

的内容
text:moment($parent.entity.TimeSent, "DD/MM/YYYY h:mm a") but I can't get it to work!

https://plnkr.co/edit/jNn3knbnCCbBQu9NgKze?p=preview

1 个答案:

答案 0 :(得分:1)

编辑:我的回答有点过于笼统。试图更具体。

将您的WorkflowRules映射到他们自己的&#34; viewmodels&#34;,您可以做任何您喜欢的事情:

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会自动将绑定的第二部分包装在一个函数中。例如:

data-bind="text: myTextObservable"

处理为:

text: function (){ return myTextObservable }

此外,knockout使用此功能创建computedObservable。这将创建对函数内部使用的任何observable的订阅,确保在任何更改时重新评估data-bind。

这意味着在您的情况下,您可以在数据绑定中定义格式规则,如此(假设timeSent是一个可观察的`):

data-bind="text: moment($parent.entity.timeSent()).format('DD/MM/YYYY h:mm a') "

Knockout将看到调用timeSent observable并确保整个绑定得到正确更新。这是一个例子:

&#13;
&#13;
var date = ko.observable(new Date());
var addDay = function() {
  date(moment(date())
    .add(1, "day")
    .toDate()
  );
};

ko.applyBindings({
  date: date,
  addDay: addDay
});
&#13;
<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>
&#13;
&#13;
&#13;

我的建议是在viewmodel中创建一个单独的计算observable。毕竟,这就是视图模型的意图,它可以帮助你修复错误。即:

// Add to your entity view model:
this.timeSentLabel = ko.computed(function() {
  return moment(this.timeSent())
    .format('DD/MM/YYYY h:mm a');
}, this);