adding values from input field to observableArray and display it (knockout.js)

StackOverflow https://stackoverflow.com/questions/21334491

  •  02-10-2022
  •  | 
  •  

Question

This is my first attempt at some knockout.js. There is an input field and the value you write into it gets "sent" to a list and displayed. However, it doesnt work and I guess it has to do with the fact that this.prodname is not associated correclty to the observableArray. But I cant figure out how to do that.

My code:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="knockout-3.0.0.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <link rel="stylesheet" type="text/css" href="lt.css"/>
        <title>eins</title>
    </head>
    <body>
        <div id="main">
        <form data-bind="submit:addValues">
            <input type="text" data-bind="value:newprod, valueUpdate='afterkeydown'"></input>
            <input type="text" data-bind="value:number,valueUpdate='afterkeydown'"></input>
            <button type="submit">OK</button>
        </form>
            <ul data-bind="foreach:productname">
            <li data-bind="text : $index"></li>
                <li data-bind="text:prodname"></li>
                <li data-bind="text:anzahl"></li>
            </ul>
        </div>
    </body>
</html>

And app.js

$(document).ready(function () {

    var mymodel = function() {

        this.newprod = ko.observable("");
        this.productname = ko.observableArray(""):

        this.addValues = function() {
            this.productname.push(this.newprod());
        };

    };
    ko.applyBindings(new mymodel());
});

I tried this, too:

this.productname.push({newprod: this.newprod() });

After reading this post: https://stackoverflow.com/questions/19419438/adding-an-item-to-an-observablearray-in-knockoutjs-when-using-mapping

As far as I can tell, my code resembles this example: http://knockoutjs.com/examples/betterList.html

However, I dont want the observableArray to be prepopulated. I want the values to come from the input field.

Thanx for your help!

Was it helpful?

Solution

You could do it this way (see fiddle)

Your code wasn't working because in the data-bind="foreach:productname" list that you had, you were trying to bind to properties of your viewmodel (one instance) instead of properties/observables of the array that you wanted to iterate over. There were also some other things, like data-bind="text:prodname" yet no prodname was defined anywhere in your view model. I cleaned it some for you, and hopefully you can adapt this code to meet your needs.

var mymodel = function () {
    var self = this;
    self.newprod = ko.observable();
    self.anzahl = ko.observable();
    self.productname = ko.observableArray();

    self.addValues = function () {
        self.productname.push(new product(self.newprod(), self.anzahl()));

        // clear the input boxes for the next entry
        self.newprod('');
        self.anzahl('');
    };
};

function product(name, anz){
    var self = this;
    self.newproduct = ko.observable(name);  
    self.anzahl = ko.observable(anz);
}

ko.applyBindings(new mymodel());

and the HTML

<div id="main">
    <form data-bind="submit:addValues">
        <input type="text" data-bind="value:newprod"></input>
        <input type="text" data-bind="value:anzahl"></input>
        <button type="submit">OK</button>
    </form>
    <ul data-bind="foreach:productname">
        <li data-bind="text: $index() + 1"></li>
        <li data-bind="text: newproduct"></li>
        <li data-bind="text: anzahl"></li>
    </ul>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top