knockoutjs date d'affichage kogrid dans la cellule - avec Plunk

Question

j'ai les columnDefs suivants

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

Mon problème est avec le temps SentX. Je voudrais que cela affiche le contenu de entity.timeSent mais converti pour la consommation humaine en utilisant la bibliothèque de moment. Comment puis-je appeler la fonction moment ($ parent.entity.timeSent) .format ('JJ/MM/AAAA h: mm a') à partir de ma colonneDeFiches?

Dans les Plunk suivants, la ligne 96 doit contenir quelque chose comme

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

Edit: Ma réponse était un peu trop général. Une tentative d'être plus spécifique.

mapper votre WorkflowRules à leurs propres "viewmodels", et vous pouvez faire tout ce que vous aimez:

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

Ensuite, dans votre modèle:

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

qui est défini dans js:

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

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

J'espère que j'ai enfin eu votre question correctement ...

(https://plnkr.co/edit/93ucvDLk5bUFtU4dB1vn?p=preview, déplacé des choses autour)

---

Réponse précédente, plus générale:

Lorsque vous créez un knock-out obligatoire, knock-out encapsule automatiquement la deuxième partie de la liaison dans une fonction. Par exemple:

data-bind="text: myTextObservable" 

est traitée comme:

text: function(){ return myTextObservable } 

De plus, knock-out utilise cette fonction pour créer un computedObservable. Cela crée un abonnement à tout observable utilisé dans la fonction, en s'assurant que la liaison de données est réévaluée si l'une d'entre elles change.

Cela signifie que dans votre cas, vous pouvez définir votre règle de format dans votre bind de données comme si (en supposant timeSent est un observable`):

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

Knockout verra que le timeSent observable est appelée et assurez-vous que toute la liaison est mise à jour correctement. Voici un exemple:

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>

Mon conseil est cependant de créer une observable calculée séparée à l'intérieur de votre viewmodel.Après tout, c'est ce que les viewmodels sont censés faire, et cela vous aidera énormément pour corriger les bugs. À savoir:

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