Potrzebuję pomocy w formatowaniu powiązania danych przy użyciu nokautu

Question

Jestem całkiem nowy w Knockout i szukam sposobu na sformatowanie danych wyjściowych. Widziałem przykład, który był podobny do tego, ale oczywiście moja próba nie działa.

Oto link do 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> 

Answer 1

Można rozważyć użycie obliczony obserwowalne:

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> 

Answer 2

Jeśli chcesz bardziej ogólne rozwiązanie można zrobić coś takiego

(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/

edytuj: Zamiast używać wartości true jako opcji, możesz podać literał obiektu z opcjami i użyć go z przedłużacza isCurrency