Saya telah menyiapkan jsfiddle kecil di sini: jsfiddle.net/v8s176p2

Pada dasarnya saya ingin menambah dan mengurangi yang dapat diamati dalam langkah-langkah 0,1 Tetapi karena representasi angka dan masalah presisi, angka kadang-kadang ditampilkan sebagai: 1.3200000000000003 ... dll, saya ingin mereka hanya ditampilkan dan memiliki nilai dengan 1 titik desimal

Bagaimana saya mengkodekan fungsi yang sama persis ini di knockout.js, tetapi dengan tidak menggunakan floating point. Jadi nilai awal saya adalah 10 dan dalam HTML ditampilkan sebagai 1, jika saya menurunkannya (10-1 = 9) dalam html ditampilkan sebagai 0,9? Ini mungkin pendekatan yang lebih baik untuk aplikasi saya, karena saya mendapatkan data ini dari server pada perangkat yang disematkan, jadi akan lebih baik untuk menerima angka sebagai 200 dan kemudian membaginya dengan 10, tetapi bagaimana mengatur ini di ko.js di contoh biola saya?

2
johndoe 29 Oktober 2019, 11:38

3 jawaban

Jawaban Terbaik

Bekerja dengan bilangan bulat dan lakukan pembagian dalam penjilidan teks untuk menampilkan titik mengambang. Ini membuat data cadangan sebagai int sehingga kesalahan tidak akan menumpuk.

data-bind="text: num1() / 10"

http://jsfiddle.net/xagup8vt/

0
caseyWebb 30 Oktober 2019, 22:19

Anda dapat membuat penjilidan khusus, seperti ini

ko.bindingHandlers.numericText = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var formattedValue = value.toFixed(2);
        ko.bindingHandlers.text.update(element, function () { return formattedValue; });
    }
};

Di sana Anda dapat memformat nilai sesuka Anda, dan kemudian menggunakannya seperti ini:

<p data-bind="numericText: num1"></p>
0
Daniel 29 Oktober 2019, 08:55

Cara lain adalah dengan menambahkan yang dapat diamati yang dihitung ke properti yang dapat diamati seperti

var vm = function(){
    var self = this;
    self.num1 = ko.observable();
    self.num1.formatted = ko.computed(function(){ return  Math.round((self.num1()*10),0)/10; });
}

Dengan cara ini pemformatan dimuat dengan model tampilan dan mengonversi objek vm ke JSON akan mengabaikan fungsi komputasi yang diformat dalam output.

Untuk menggunakannya, <p data-bind="text: num1.formatted"></p>

Pilihan lain adalah menggunakan observasi yang dapat ditulis yang dihitung. Saya telah menyertakan kedua teknik dalam cuplikan berikut.

var increment = function(observable) {
  observable(observable() + 0.1);
};
var decrement = function(observable) {
  observable(observable() - 0.1);
};

var MyViewModel = function() {
  var self = this;
  self.num1 = ko.observable(0);
  self.num1.formatted = ko.computed(function() {
    return Math.round((self.num1() * 10), 0) / 10;
  });
  var num2BackingProperty = ko.observable(0);
  self.num2 = ko.computed({

    read: function() {
      return num2BackingProperty();
    },
    write: function(value) {
      num2BackingProperty(Math.round((value * 10), 0) / 10);
    },
    owner: self
  })

  this.incrementNum = function(observable) {
    // passing the observable by reference to the helper function
    increment(observable);
  };

  this.decrementNum = function(observable) {
    decrement(observable);
  };
}

ko.applyBindings(new MyViewModel());
h3 {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<button data-bind="click: incrementNum.bind($root, num1)">Increment Num1</button>
<button data-bind="click: decrementNum.bind($root, num1)">Decrement Num1</button>
<h3>
  Formatted
</h3>
<p data-bind="text: num1.formatted"></p>
<h3>
  Unformatted
</h3>
<p data-bind="text: num1"></p>
<br/>
<br/>
<button data-bind="click: incrementNum.bind($root, num2)">Increment Num2</button>
<button data-bind="click: decrementNum.bind($root, num2)">Decrement Num2</button>

<h3>
  Writable Computed
</h3>
<p data-bind="text: num2"></p>
<br/>
<h3>
  View Model Json
</h3>

<pre data-bind="text: ko.toJSON($root)"></pre>

http://jsfiddle.net/gonefishern/yo2nurf8/30/

0
Nathan Fisher 31 Oktober 2019, 06:18