Knockoutjs: How to show "sum" of values in an input?

Asked

Viewed 59 times

0

Hello! Follows code:

window.onload = function () {
    var viewModel = function () {
        var self = this;

        self.label1 = "Label 1: ";
        self.label2 = "Label 2: ";
        self.show = "";

        self.input1 = ko.observable();
        self.input2 = ko.observable();

        self.button = function () {
            self.show = ko.pureComputed(function () {
                if (self.input1() != undefined || self.input2() != undefined) {
                    self.show = self.input1() + ' ' + self.input2();
                }
            }, this);
        }
    };

    ko.applyBindings(new viewModel());
};
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Knouckout </title>
    <script type="text/javascript" src="jquery3.4.1.js"></script>
    <script type="text/javascript" src="knockout-3.5.1.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
    <style>
        input {
            width: 80px;
        }
        button {
            width: 30px;
        }
    </style>
</head>

<body>
    <div style="display: flex; flex-direction: column">
        <span data-bind="text: label1"></span>
        <input data-bind="value: input1">
        <span data-bind="text: label2"></span>
        <input data-bind="value: input2">
        <button data-bind="click: button"> + </button>
        <input disabled data-bind="value: show">
    </div>
</body>

</html>

I have this small screen, where two values are inserted, and I aim to take these values (if they are not Undefined) and show in a single disabled input when clicked on the button. For this, I considered using the pureComputed that would be best suited for this, as I searched the documentation. But when I click the button, nothing happens. Would anyone know what’s wrong? Grateful for the attention!

knockoutjs

1 answer

1

You use pureComputed when you want the values to automatically perform as soon as the inputs are changed, in your case as you want to update only after clicking on the button you can play the sum result in a third variable, and assign in the 3rd input bind

var viewModel = function () {
        var self = this;

        self.label1 = "Label 1: ";
        self.label2 = "Label 2: ";
        self.show = "";

        self.input1 = ko.observable();
        self.input2 = ko.observable();
        self.show = ko.observable();

        self.button = function () {
            self.show(Number(self.input1()) + Number(self.input2())); 
        }
    };

    ko.applyBindings(new viewModel());

HTML

<div style="display: flex; flex-direction: column">
    <span data-bind="text: label1"></span>
    <input data-bind="value: input1">
    <span data-bind="text: label2"></span>
    <input data-bind="value: input2">
    <button data-bind="click: button"> + </button>
    <input disabled data-bind="value: show()" >
</div>

  • Thank you very much. My interpretation of the computed was mistaken.

Browser other questions tagged knockoutjs

You are not signed in. Login or sign up in order to post.