Ich brauche Hilfe Formatierung einer Datenbindung mit Knockout

Ich bin ziemlich neu zu Knockout und ich suche nach Möglichkeit, die Ausgabe zu formatieren. Ich habe ein Beispiel gesehen, das so ist, aber natürlich funktioniert mein Versuch nicht. HierIch brauche Hilfe Formatierung einer Datenbindung mit Knockout

ist der Link zum jsfiddle: http://jsfiddle.net/cezmp/

<div id="VMDiv">  
<table> 
    <thead> 
     <tr> 
     <th>Raw</th> 
     <th>Formatted</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td data-bind="text : SomeData "> </td> 
      <td data-bind="text : formatPercent(SomeData())"> </td> 
     </tr> 
    </tbody> 
</table> 
</div> 


<script type="text/javascript"> 
    function formatPercent(value) { 
     return value.toFixed(2) + "%"; 
    } 

    function vm() { 
     var self = this; 
     self.SomeData = ko.observable(62.1795972898); 
    } 

    ko.applyBindings(new vm(), document.getElementById("VMDiv")); 
</script>

Quelle

2012-08-01 Jim

Sie könnte in Erwägung ziehen mit einem beobachtbaren berechnete:

div id="VMDiv">  
<table> 
<thead> 
    <tr> 
    <th>Raw</th> 
    <th>Formatted</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td data-bind="text : SomeData "> </td> 
     <td data-bind="text : SomeDataFormatted"> </td> 
    </tr> 
</tbody> 
</table> 
</div> 

<script type="text/javascript"> 
    function vm() { 
     var self = this; 
     self.SomeData = ko.observable(62.1795972898); 
     self.SomeDataFormatted = ko.computed(function(){ 
      return self.SomeData().toFixed(2) + "%"; 
     }); 
    } 

    ko.applyBindings(new vm(), document.getElementById("VMDiv")); 
</script>

Quelle

2012-08-01 00:54:45 KodeKreachor

Das funktioniert, aber nicht ideal für meinen Anwendungsfall. Ich habe das auf der Knkockout Seite gefunden. http://knockoutjs.com/examples/cartEditor.html Es hat ein Beispiel, wie ich es wollte, aber ich habe immer noch Probleme, meinen Code richtig funktionieren zu lassen. Ich werde weiter wegstecken. – Jim

Nur als ein schnelles Beispiel dafür, wie flockig das ist. Ich machte eine andere einfache jsfiddle http://jsfiddle.net/cezmp/1/ Es ist eine abgespeckte Version der CartEditor Demo oben. Es funktioniert nicht in jsfiddle, aber es funktioniert "irgendwie" auf meiner Test-HTML-Seite auf meiner Website. – Jim

Werfen Sie einen genaueren Blick auf mein Beispiel oben, das berechnete Observable führt die Formatierung durch und ist dann direkt mit dem Text Ihres Elements verbunden. Hier ist ein Update für deine Geige: http://jsfiddle.net/cezmp/3/ – KodeKreachor

Wenn Sie eine generische Lösung wollen, können Sie so etwas wie dieses

tun

(function() { 

    ko.extenders.isCurrency = function (target, options) { 
     var result = ko.dependentObservable({ 
      read: function() { 
       return Globalize.format(target(), "c"); 
      }, 
      write: target 
     }); 


     result.raw = target; 
     return result; 
    }; 
}()); 


ViewModel = function() { 
    this.cashIsKing = ko.observable(565345.56435535).extend({ isCurrency: true}); 
}; 

ko.applyBindings(new ViewModel());

http://jsfiddle.net/5H5AK/

edit: Anstatt true als Optionen zu verwenden, können Sie ein Objektliteral mit Optionen angeben und das vom isCurrency extender verwenden

Quelle

2012-08-01 07:58:08 Anders

Ich brauche Hilfe Formatierung einer Datenbindung mit Knockout

Antwort

Verwandte Themen