2013-04-15 1 views
12

sto usando knockout per popolare i valori numerici all'interno di una tabella:Aggiunta di formattazione decimale a eliminazione diretta associazioni di dati numerici

HTML:

<tbody data-bind="foreach: commision"> 
      <tr> 
       <td> 
        <span>R </span><span data-bind="text: Amount"></span> 
       </td> 
      </tr>... 
</tbody> 

Knockout.js parte di pertinenza pari e commissione

var vm = { 
      commision: ko.observable(), 
      futurecommision: ko.observable(), 
      commisionpaid: ko.observable(), 
      totals: ko.observable(), 
      commisionPaid: ko.observable(ko.utils.unwrapObservable(ko.mapping.fromJS({ 
       Date: null, 
       Amount: 0 
      }))), 
... 

Ora come faccio a mostrare il numero che viene popolato in decimale, ad esempio .00? es. 10.00

Attualmente sta mostrando solo il numero, per esempio 10

risposta

26

Si potrebbe guardare a scrivere un extender personalizzato per gestire questa situazione.

Un estensore di base è qualcosa di simile:

ko.extenders.numeric = function(target, precision) { 
    var result = ko.computed({ 
     read: function() { 
      return target().toFixed(precision); 
     }, 
     write: target 
    }); 

    result.raw = target; 
    return result; 
}; 

Questo viene poi utilizzato sulle osservabili come:

var commissionPaid = ko.observable(whatever your value is).extend({numeric: 2}); 
+2

+1 funziona come un fascino http://jsfiddle.net/m6ZKZ/ nota comunque che dependentObservable è deprecato, usa ko.computed() invece – xec

+0

@xec buon punto, totalmente dimenticato di quello – Thewads

+0

grazie a Thewads e grazie xec, apprezzare il violino. In ogni modo posso aggiungere il raggruppamento di cifre: cioè 10.000,00, 100 000,00, 1 000 000,00 ecc.? – DextrousDave

6

Date un'occhiata a questo KO denaro Extender:

http://jsfiddle.net/digitalbush/R6MPU/

(function(){ 
    var format = function(value) { 
     toks = value.toFixed(2).replace('-', '').split('.'); 
     var display = '$' + $.map(toks[0].split('').reverse(), function(elm, i) { 
      return [(i % 3 === 0 && i > 0 ? ',' : ''), elm]; 
     }).reverse().join('') + '.' + toks[1]; 

     return value < 0 ? '-' + display : display; 
    }; 

ko.subscribable.fn.money = function() { 
    var target = this; 

    var writeTarget = function(value) { 
     var stripped=value 
      .replace(/[^0-9.-]/g, ''); 

     target(parseFloat(stripped)); 
    }; 

    var result = ko.computed({ 
     read: function() { 
      return target(); 
     }, 
     write: writeTarget 
    }); 

    result.formatted = ko.computed({ 
     read: function() { 
      return format(target()); 
     }, 
     write: writeTarget 
    }); 

    result.isNegative = ko.computed(function(){ 
     return target()<0; 
    }); 

    return result; 
}; 
})(); 

//Wire it up 
$(function() { 
    var viewModel = { 
     Cash: ko.observable(-1234.56).money(), 
     Check: ko.observable(2000).money(), 
     showJSON: function() { 
      alert(ko.toJSON(viewModel)); 
     } 
    }; 


    viewModel.Total = ko.computed(function() { 
     return this.Cash() + this.Check(); 
    }, viewModel).money(); 
    ko.applyBindings(viewModel); 
}); 
+0

nice, grazie – DextrousDave

+0

utile grazie –

+0

@David Ottimo lavoro. Stavo cercando questa correzione per variabili di valore del denaro scrivibili. Ho apportato due modifiche a quello che hai fatto: 1. Quando il valore cambia nel campo di input, tenta immediatamente di formattare il valore, cioè prima che l'utente finisca di digitare, formatta il valore e aggiorna nel campo di input che non è auspicabile. Quindi, ho utilizzato Ratelimit per propagare le modifiche dopo il ritardo self.Variable = ko.observable(). Extend ({rateLimit: 2000}). Money() 2. Inoltre, nel campo di input se il valore viene rimosso, veniva visualizzato Messaggio di errore NaN. Per gestire che ho messo per IsNaN nella funzione di formato – user2185592