mustache.js Datum Formatierung

Question

Ich habe angefangen mit mustache.js und bisher bin ich sehr beeindruckt. Obwohl zwei Dinge mich verwirren. Der erste führt weiter zum zweiten, also ertragen Sie mit mir.

Meine JSON

{"goalsCollection": [ 
    { 
     "Id": "d5dce10e-513c-449d-8e34-8fe771fa464a", 
     "Description": "Multum", 
     "TargetAmount": 2935.9, 
     "TargetDate": "/Date(1558998000000)/" 
    }, 
    { 
     "Id": "eac65501-21f5-f831-fb07-dcfead50d1d9", 
     "Description": "quad nomen", 
     "TargetAmount": 6976.12, 
     "TargetDate": "/Date(1606953600000)/" 
    } 
]}; 

Meine Behandlungsfunktion

function renderInvestmentGoals(collection) { 
    var tpl = '{{#goalsCollection}}<tr><td>{{Description}}</td><td>{{TargetAmount}}</td><td>{{TargetDate}}</td></tr>{{/goalsCollection}}'; 
    $('#tblGoals tbody').html('').html(Mustache.to_html(tpl, collection)); 
} 

Q1 Wie Sie meinen 'TargetDate Bedürfnisse Parsen aber ich bin nicht sicher, wie das zu tun in meiner jetzigen Funktion.

Q2 sagen, dass ich vor dem Rendern, eine Funktion oder die Formatierung auf einem oder mehreren von meinen Objekten ausführen wollte, was ist der beste Weg, es zu tun?

Answer 1

Ich habe Moustache auch für meine Projekte verwendet, aufgrund seiner Fähigkeit, über Client/Server geteilt zu werden. Was ich getan habe, war die Formatierung aller Werte (Daten, Währung) in Strings serverseitig, so dass ich mich nicht auf Javascript-Hilfsfunktionen verlassen muss. Dies funktioniert jedoch möglicherweise nicht gut für Sie, wenn Sie diese Werte clientseitig mit diesen Werten vergleichen.

Sie könnten auch in Verwendung handlebars.js, die im Wesentlichen Schnurrbart ist, aber mit Erweiterungen, die bei der clientseitigen Formatierung (und mehr) helfen können, aussehen. Der Verlust hier ist, dass Sie wahrscheinlich keine serverseitige Implementierung von Lenkern finden werden, wenn das für Sie wichtig ist.

Answer 2

Sie können den Zeitstempel mit einfachen String-Methoden erhalten:

goalsCollection.targetDate = goalsCollection.targetDate.substring(6,18); 

Natürlich hängt dies von Ihrem Zeitstempel jedes Mal die gleiche Länge haben. Eine andere Option ist:

goalsCollection.targetDate = 
    goalsCollection.targetDate.substring(6, goalsCollection.targetDate.length - 1); 

Diese Techniken sind nicht für Moustache spezifisch und können verwendet werden, um Daten für jede Bibliothek zu bearbeiten. Weitere Informationen finden Sie unter Mozilla Developer Center Documentation on substring.

Answer 3

können Sie verwenden, um ein "lambda"

"TargetDate": "/Date(1606953600000)/", 
"FormatDate": function() { 
    return function(rawDate) { 
     return rawDate.toString(); 
    } 
}, ... 

Dann im Markup:

<td> 
{{#FormatDate}} 
    {{TargetDate}} 
{{/FormatDate}} 
</td> 

Aus dem Link:

Wenn der Wert ein aufrufbare Objekt ist, wie zum Beispiel einer Funktion oder Lambda wird das Objekt aufgerufen und der Textblock übergeben. Der übergebene Text ist der Literalblock, nicht gerendert.

Answer 4

Um eine Funktion in einem JSON zu deklarieren, können Sie dies immer tun.

var json = '{"RESULTS": true, "count": 1, "targetdate" : "/Date(1606953600000)/"}' 

var obj = JSON.parse(json); 
obj.newFunc = function (x) { 
    return x; 
} 

//OUTPUT 
alert(obj.newFunc(123)); 

Answer 5

Es ist eine lange Zeit her, aber auf der Suche nach genau das gleiche. Mit Mustachejs (jetzt) ​​können Sie Funktionen der übergebenen Daten aufrufen und nicht nur das; In der Funktion ist der Wert this welcher Wert in einem Abschnitt auch wahr ist.

Wenn meine Vorlage ist wie folgt:

{{#names}} 
    <p>Name is:{{name}}</p> 
    <!-- Comment will be removed by compileTemplates.sh 
     #lastLogin is an if statement if lastLogin it'll do this 
     ^lastLogin will execute if there is not lastLogin  
    --> 
    {{#lastLogin}} 
    <!-- 
     formatLogin is a method to format last Login 
     the function has to be part of the data sent 
     to the template 
    --> 
    <p>Last Login:{{formatLogin}}</p> 
    {{/lastLogin}} 
    {{^lastLogin}} 
    not logged in yet 
    {{/lastLogin}} 
    {{#name}} 
    passing name to it now:{{formatLogin}} 
    {{/name}} 
{{/names}} 

und Daten wie folgt aus:

var data={ 
    names:[ 
     {name:"Willy",lastLogin:new Date()} 
    ], 
    formatLogin:function(){ 
      //this is the lastDate used or name based on the block 
        //{{#name}}{{formatLogin}}{{/name}}:this is name 
        //{{#lastLogin}}{{formatLogin}}{{/lastLogin}}:this is lastLogin 
      if(!/Date\]$/.test(Object.prototype.toString.call(this))){ 
       return "Invalid Date:"+this; 
      } 
      return this.getFullYear() 
      +"-"+this.getMonth()+1 
      +"-"+this.getDate(); 
    } 
}; 
var output = Mustache.render(templates.test, data); 
console.log(output); 

Answer 6

ich für Mustache.js eine kleine Erweiterung erstellt haben, die die Verwendung von Formatierer innerhalb von Ausdrücken ermöglicht, wie {{Ausdruck | Formatierer}}

Sie würden ohnehin eine Funktion erstellen, die Sie das Datum Wert wie folgt analysiert:

     Mustache.Formatters = { 
     date: function(str) { 
      var dt = new Date(parseInt(str.substr(6, str.length-8), 10)); 
      return (dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear()); 
     } 
     }; 

Und dann fügen Sie einfach den Formatierer Ihre Ausdrücke:

{{TargetDate | date}} 

Sie greifen der Code von hier: http://jvitela.github.io/mustache-wax/