knockoutjs kogrid Anzeige Datum in der Zelle - mit zupfen

Question

Ich habe folgend 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>' }, 
    ]; 

Mein Problem mit der Zeit SentX ist. Ich möchte, dass dies den Inhalt von entity.timeSent anzeigt, aber mithilfe der Momentbibliothek für den menschlichen Konsum konvertiert wird.

Wie kann ich den Funktionsmoment ($ parent.entity.timeSent) .format ('TT/MM/JJJJ h: mm a') aus meinem columnDefs aufrufen? https://plnkr.co/edit/jNn3knbnCCbBQu9NgKze?p=preview

Answer 1

Edit:: Meine Antwort war ein bisschen zu allgemein

In den folgenden zupfen, Linie 96 braucht so etwas wie

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

enthalten. Ein Versuch, genauer zu sein.

Karte Ihres WorkflowRules, um ihr eigenen "Viewmodel", und Sie können alles tun, Sie mögen:

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; 
})); 

Dann in der Vorlage:

<div data-bind="with: $parent.entity"> 
    <a data-bind="text: timeSentLabel, 
       attr: {href: href}"></a> 
</div>';  

die in js definiert:

var timeSentTemplate = '<div data-bind="with: $parent.entity"><a data-bind="text: timeSentLabel, attr: {href: href}"></a></div>'; 

var columnDefs = [ 
    { cellTemplate: timeSentTemplate, /* etc. */ } 
]; 

Ich hoffe, ich habe endlich Ihre Frage richtig ...

(https://plnkr.co/edit/93ucvDLk5bUFtU4dB1vn?p=preview, zog ein paar Sachen um)

---

zurück, allgemeinere Antwort:

Wenn Sie ein KO-Bindung, erstellen in einer Funktion Knockout automatisch wickelt den zweiten Teil der Bindung. Zum Beispiel:

data-bind="text: myTextObservable" 

wird verarbeitet, wie:

text: function(){ return myTextObservable } 

Zusätzlich Knockout diese Funktion ein computedObservable erstellen verwendet. Dadurch wird eine Subskription für alle Observable erstellt, die in der Funktion verwendet werden. Dadurch wird sichergestellt, dass die Datenbindung erneut überprüft wird, wenn sich eine von ihnen ändert.

Dies bedeutet, dass in Ihrem Fall Sie Ihr Format Regel innerhalb Ihrer Daten-bind wie so (timeSent unter der Annahme eines observable`) definieren:

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

Knockout, dass die timeSent beobachtbaren genannt sehen ist und Stellen Sie sicher, dass die gesamte Bindung korrekt aktualisiert wird. Hier ein Beispiel:

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>

Mein Rat ist jedoch eine separate berechneten beobachtbaren in Ihrem Ansichtsmodell zu erstellen.Schließlich sollen Viewmodels funktionieren und Ihnen bei der Fehlerbehebung behilflich sein. Dh:

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