knockoutjs細胞內kogrid顯示日期 - 與普拉克

Question

我有以下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>' }, 
    ]; 

我的問題是與時間SentX。我想這顯示entity.timeSent的內容，但轉換爲使用時刻庫​​的人類消費。

如何在我的columnDefs中調用函數時刻（$ 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! 

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

Answer 1

編輯：我的回答有點太籠統。試圖更具體。

地圖你WorkflowRules自己 「的ViewModels」，你可以做任何你喜歡的：

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，搬來搬去的一些東西）

---

上，更普遍的答案：

當你創建一個淘汰賽結合，淘汰賽自動包裝在一個函數結合的第二部分。例如：

data-bind="text: myTextObservable" 

被處理爲：

text: function(){ return myTextObservable } 

此外，敲除使用該函數創建一個computedObservable。這將創建一個訂閱該函數內部使用的任何observable，確保數據綁定在它們中的任何一個發生更改時被重新評估。

這意味着，在你的情況，你也可以定義數據綁定內您的格式規則，像這樣（假設timeSent是一種observable`）：

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

淘汰賽將看到timeSent觀察到被調用，確保整個綁定得到正確更新。這裏有一個例子：然而

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>

我的建議是創建一個單獨的計算觀察到您的視圖模型內。畢竟，這是視圖模型的意圖，它會幫助你在修復bug時做很多事情。即：

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