75232

Knockout JS - Binding to array of observable Ints [duplicate]

Question:

This question already has an answer here:

<ul><li> <a href="/questions/9510539/knockout-js-how-to-correctly-bind-an-observablearray" dir="ltr" rel="nofollow">Knockout JS - How to correctly bind an observableArray</a> <span class="question-originals-answer-count"> 2 answers </span> </li> </ul>

I'm trying to bind a simple array of <strong>integers</strong> to an unordered list with inputs, like so:

ViewModel

self.amounts = ko.observableArray(); for (var i=0; i<5; i++){ self.amounts.push(ko.observable(i)); }

HTML

<ul data-bind="foreach: amounts"> <li><input type="text" data-bind="value: $data"/></li> </ul>

This produces the list with the inputs properly filled in with the numbers 0-4. However, when I change the value of any of the inputs the ViewModel does not get the new values.

If I use an array of simple objects as the observableArray, like so:

[{amt: 0}, {amt: 1}, {amt: 2}]

and adjust the HTML to bind the input to the "amt" property, then changing the values in the inputs does trigger changes in the ViewModel.

Is it possible to use an array of simple values and achieve two-way binding, without using a workaround that changes the original data model? If so, what am I doing wrong?

<strong>edit:</strong> this question is different than the one to which it has been marked as duplicate <a href="https://stackoverflow.com/questions/9510539/knockout-js-how-to-correctly-bind-an-observablearray" rel="nofollow">Knockout JS - How to correctly bind an observableArray</a>, it's about a special two-way binding case on simple type elements - <em>ints</em>, or <em>strings</em>.

Answer1:

Looks like this is a duplicate question and my hunch was correct. $data will always unwrap observables, so you have to use an array of name, value object pairs instead.

See this question: <a href="https://stackoverflow.com/questions/9510539/knockout-js-how-to-correctly-bind-an-observablearray" rel="nofollow">Knockout JS - How to correctly bind an observableArray</a>

Answer2:

$data is not going to work in this case. Instead, you can create an array of objects like this:

<ul data-bind="foreach: amounts"> <li> <input type="text" data-bind="value: value" /> </li> </ul> <button data-bind="click: checkValues">Check</button>

. .

var MyNumber = function (name, value) { this.name = ko.observable(name); this.value = ko.observable(value); }; var VM = function () { this.amounts = ko.observableArray(); this.checkValues = function () { for (var i = 0; i < 5; i++) { console.log('amount = ' + vm.amounts()[i].value()); } }; }; var vm = new VM(); vm.amounts().push(new MyNumber('a', 1)); vm.amounts().push(new MyNumber('b', 2)); vm.amounts().push(new MyNumber('c', 3)); vm.amounts().push(new MyNumber('d', 4)); vm.amounts().push(new MyNumber('e', 5)); ko.applyBindings(vm);

Recommend

  • find in a javascript array from meteor mongodb
  • Can we implement some code that fires upon selecting something in google document?
  • Import named range data between Google Workbooks
  • Google Spreadsheets Copy Value and Formats Script Issues
  • python package compiled with nuitka fails with segmentation fault
  • webScriptNameForSelector and javascript method with underscore
  • MVC3 globalization issue
  • search the database based on the value selected from database
  • Storyboard iOS MBProgressHUD
  • Can't perform CORS request using Angularjs
  • Google Apps Script fails to generate image from EmbeddedChartBuilder
  • VS2010: Ctrl-PgUp / -PgDown like in browsers
  • Error processing job: Project has not enabled BigQuery
  • How to modify the way a ForeignKey field is rendered in a Django admin page to avoid browser crash?
  • How to get a time and Date Separately?
  • Use AutoIt with java applications
  • What does “T extends Junk” mean in a generic class in Java?
  • How to use Flask's render_template from an ajax POST form submit
  • How do I use libcurl to printf a remote FTP directory listing?
  • Ajax call on Multiple selection in Select box
  • Google Spreadsheet Script to Blink a range of Cells
  • Content-Type alternative in MQTT
  • How to clear a browser cache in Protractor
  • How to turn off notice reporting in xampp?
  • how to run ejabberd with Erlang on Heroku?
  • How to use Streams api peek() function and make it work?
  • How to decleare char *const argv[] in swift [duplicate]
  • php “page caching” solution suggestions for CMS Applications
  • How to get rgb from transparent pixel in js
  • Call Microservice from another Microservice within Docker
  • Jersey serializes character value to ASCII equivalent numeric string
  • How to use FirstOrDefault inside Include
  • WPF custom control and direct content support
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • CAS 4 - Not able to retrieve the LDAP groups after successful authentication
  • Running R's aov() mixed effects model from Python using rpy2
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?
  • Access to a Matlab gui from the web
  • ReferenceError: TextEncoder is not defined