knockoutjsセル内のkogrid表示日付 - plunk

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内からfunction moment（$ parent.entity.timeSent）.format（ 'DD/MM/YYYY h：mm a'）をどのように呼び出すことができますか？ https://plnkr.co/edit/jNn3knbnCCbBQu9NgKze?p=preview

Answer 1

編集：以下plunk、ライン96人のニーズに

が

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

のようなものを含むように私の答えは少しあまりにも一般的でした。より具体的な試み。

は地図を自分自身の "のviewmodels"、そしてあなたが何かを行うことができますあなたが好きにWorkflowRules：

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

その後、テンプレート内：JSで定義されている

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

：

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を作成するには、この機能を使用しています。これにより、関数内で使用されている任意のオブザーバブルにサブスクリプションが作成され、データバインドが変更された場合にデータバインドが再評価されます。

これはあなたのケースでは、あなたがそう（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>

私のアドバイスは、しかし、あなたのviewmodel内の別々の計算された、観察を作成することです。結局のところ、これはビューモデルが行うことを意図したものであり、バグを修正する際に大いに役立ちます。すなわち： `{フィールド： 'TimeSent'、のdisplayName： 'TimeSent'、幅：130、cellFilter：機能（データ）{リターンモーメント（データ

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