как разобрать строку ko.observable, полученную из json, в целочисленное значение (число)

Question

Я получаю строку в моем ViewModel от json ответа от сервера. это выглядит так:

"manual_setpoint": "200",

Затем мне нужно отобразить это в моем представлении:

<div class="setpoint"  data-bind="text: vm.manual_setpoint(), style: { color: vm.state()? '#f00000' : '#777777'}"></div>

Это должно быть отображено как число 20 (200/10), потому что там кнопки для увеличения и уменьшения наблюдаемой величины (например, 201-> 20.1, 199-> 19.9). Это не было проблемой, в то время как моя наблюдаемая была определена локально как число. Я сделал это так:

   self.manual_setpoint.formatted = function() {
     return (self.manual_setpoint() / 10);
   };

и затем отобразил manual_setpoint.formatted () в моем представлении. У меня также были кнопки для увеличения и уменьшения этого наблюдаемого, как это:

self.decSetpoint = function (observable) {
decrement(observable);
};

var decrement = function (observable) {
observable(observable() - 1);
};

Сейчас когда ответ от сервера String, мои методы больше не работают. (например, за 200 + 1 я получаю 2001 et c ....)

как справиться с этой ситуацией самым простым и элегантным способом? Мне нужно, чтобы в моем виде отображалось правильное число (поэтому для 200 мне нужно 20), и я должен иметь возможность увеличивать и уменьшать то же самое наблюдаемое, как и до

Answer 1

после комментария @ johndoe - уважительно, я не согласен. Рад удалить ответ, если я неправильно понял вопрос.

Если значение отправляется в виде строки в JSON и отображается через ko.map.from Js, очень велики шансы, что оно было отображено как ko.observable("200"), а не ko.observable(200), если тогда я вижу, что вы можете сделать пару вещей

1. Сделать что-то с отображением, чтобы преобразовать значение в целое число / число с плавающей запятой, которое должно заставить функцию decrement() работать как положено; или

2. измените функцию декремента для преобразования значения следующим образом.

   var decrement = function (observable) {
      observable(parseInt(observable()) - 1);
   };
   

Я также изменил бы

   self.manual_setpoint.formatted = function() {
     return (self.manual_setpoint() / 10);
   };

в

   self.manual_setpoint.formatted = ko.pureComputed(function() {
     return (self.manual_setpoint() / 10);
   });

, чтобы при изменении значения параметра manual_setpoint также обновлялась отформатированная версия.

РЕДАКТИРОВАТЬ

Ну, я стою исправлено необходимость использовать pureComputed для форматированной функции. При использовании этого теста basi c выясняется, что простое использование функции работает как положено. В течение долгого времени я понимал, что добавление функции, которая каким-либо образом обертывает наблюдаемое, будет выполнено один раз и не будет обновляться, если обернутая наблюдаемая была обновлена ​​после выполнения функции обертывания (обычно во время процесса привязки). поэтому, когда представление было привязано к функции обтекания, оно не будет обновлено, потому что возвращаемая функция не была наблюдаемой.

Кроме того, похоже, что parseInt на самом деле не требуется ни на основании теста, вероятно, потому что функция делает разделение. я думаю, что мой опыт основан на добавлении, которое приводит к таким вещам, как "20" + 1 = "201" вместо 20 + 1 = 21

Надеюсь, приведенные ниже тесты помогут вам так же, как они мне помогли.

var app = window.app || {};

app.vm = new Vm();

function Vm(){
  var self = this;
  self.manual_setpoint = ko.observable("200");
  self.manual_setpoint.formatted =  function() {
     return (parseInt(self.manual_setpoint()) / 10);
  };
  self.manual_setpoint.formattedAsComputed =  ko.pureComputed(function() {
     return (self.manual_setpoint() / 10);
  });
  self.state = ko.observable(true);
  
  self.increment = function(){
    var value = parseInt(self.manual_setpoint()) + 1;
    self.manual_setpoint(value.toString());
  };
  self.decrement = function(){
    var value = parseInt(self.manual_setpoint()) - 1;
    self.manual_setpoint(value.toString());
  }
};

ko.applyBindings(app);

Increment
Decrement