Binding two values to an input field using knockout.js

Question

Description
I have 3 checkboxes and one input field. When a user selects the checkboxes, the values appear on the input field. However, when a user does not select any of the checkboxes, I want an alternative value to appear in the input field.

What I have so far
http://jsfiddle.net/uFQdq/8/

function ViewModel() {
    var self = this;  
    self.primaryClass = ko.observable("50"); 
    self.secondaryClass = ko.observable("40"); 
    self.otherClass = ko.observable("10"); 

    self.alternativeValue("200");     

    self.selectedValues = ko.observableArray([]);

    self.sum = ko.computed(function () {
        var total = 0;
        ko.utils.arrayForEach(self.selectedValues(), function (item) {
            total += parseInt(item);
        });
        return total;
    });
}

ko.applyBindings(new ViewModel());

Issue
The issue at hand is that NOTHING is being displayed in the input field. What am I doing wrong?

Paul Manzotti · Accepted Answer · 2013-03-22 18:18:51Z

1

It's because you've not made alternativeValue an observable:

self.alternativeValue = ko.observable("200");

Updated fiddle

answered Mar 22, 2013 at 18:18

Paul Manzotti

5,14723 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

babich.ss · Accepted Answer · 2013-03-23 08:48:21Z

I think that is what you really need: your fiddle, revision 10.

<input data-bind="checked: selectedValues" type="checkbox" value="50">50</input>
<input data-bind="checked: selectedValues" type="checkbox" value="40">40</input>
<input data-bind="checked: selectedValues" type="checkbox" value="10">10</input>

<br/>
Result:
<input data-bind="value: sum" type="text"></input>

/*You really don`t need an observables for values*/

var model = {
    selectedValues: ko.observableArray([])
}

model.sum = ko.computed(function () {
    var result = 0;

    model.selectedValues().forEach(function(value){
        result += parseInt(value, 10);
    });

    if (result === 0) {
        result = 200;
    }
    return result;
});

ko.applyBindings(model);

Collectives™ on Stack Overflow

Binding two values to an input field using knockout.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related