मैंने यहां एक छोटा jsfiddle तैयार किया है: jsfiddle.net/v8s176p2

मूल रूप से मैं 0.1 के चरणों में वृद्धि और कमी करना चाहता हूं लेकिन संख्या प्रतिनिधित्व और सटीक मुद्दों के कारण, संख्याएं कभी-कभी प्रदर्शित होती हैं: 1.3200000000000003 ... आदि, मैं चाहता हूं कि उन्हें केवल प्रदर्शित किया जाए और 1 दशमलव बिंदु वाले मान हों

मैं इस सटीक समान कार्यक्षमता को नॉकआउट.जेएस में कैसे कोडित करूं, लेकिन फ्लोटिंग पॉइंट का उपयोग न करके। तो मेरा शुरुआती मूल्य 10 है और एचटीएमएल में इसे 1 के रूप में प्रदर्शित किया जाता है, अगर मैं इसे एचटीएमएल में (10-1 = 9) घटाता हूं तो इसे 0.9 के रूप में प्रदर्शित किया जाता है? यह शायद मेरे आवेदन के लिए बेहतर तरीका है, क्योंकि मुझे यह डेटा एम्बेडेड डिवाइस पर एक सर्वर से मिलता है, इसलिए बेहतर होगा कि संख्या 200 प्राप्त करें और फिर इसे 10 से विभाजित करें, लेकिन इसे ko.js में कैसे सेट करें मेरा उदाहरण बेला?

2
johndoe 29 अक्टूबर 2019, 11:38

3 जवाब

सबसे बढ़िया उत्तर

पूर्णांकों के साथ कार्य करें और फ्लोटिंग पॉइंट प्रदर्शित करने के लिए टेक्स्ट बाइंडिंग में विभाजन करें। यह बैकिंग डेटा को इनट्स के रूप में रखता है ताकि त्रुटियां जमा न हों।

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

http://jsfiddle.net/xagup8vt/

0
caseyWebb 30 अक्टूबर 2019, 22:19

आप एक कस्टम बाइंडिंग बना सकते हैं, कुछ इस तरह

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; });
    }
};

वहां आप अपनी पसंद के अनुसार मूल्य को प्रारूपित कर सकते हैं, और फिर इसे इस तरह उपयोग कर सकते हैं:

<p data-bind="numericText: num1"></p>
0
Daniel 29 अक्टूबर 2019, 08:55

एक अन्य तरीका यह है कि एक परिकलित अवलोकनीय को देखने योग्य संपत्ति में जोड़ा जाए जैसे

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

इस प्रकार स्वरूपण दृश्य मॉडल के साथ समाहित है और vm ऑब्जेक्ट को JSON में परिवर्तित करने से आउटपुट में स्वरूपित गणना फ़ंक्शन को अनदेखा कर दिया जाएगा।

इसके प्रयेाग के लिए, <p data-bind="text: num1.formatted"></p>

एक अन्य विकल्प एक लिखने योग्य गणना योग्य अवलोकन का उपयोग करना है। मैंने निम्नलिखित स्निपेट में दोनों तकनीकों को शामिल किया है।

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 अक्टूबर 2019, 06:18