0

Olá! Segue código:

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>

Tenho essa pequena tela, onde são inseridos dois valores, e tenho como objetivo, pegar esse valores (caso não sejam undefined) e mostrar em um único input disabled quando clicado no button. Para isso, considerei usar o pureComputed que seria mais indicado para tal, conforme pesquisei na documentação. Mas, quando clico no button, nada acontece. Alguém saberia informar o que há de errado? Grato pela atenção!

1 Resposta 1

1

Você usa pureComputed quando você quer que os valores se atulizem automaticamente assim que os inputs são alterados, no seu caso como quer atualizar só após o click no botão você pode jogar o resultado da soma em uma terceira variável, e atribuir no bind do 3º input

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>
1
  • Muito obrigado. Minha interpretação do computed estava equivocada.
    – STR21
    Commented 27/02/2020 às 18:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .