Questions tagged [ko.observablearray]

An observableArray is a knockout.js construct similar to a regular array in JavaScript, except that it allows for observing changes to the collection (e.g. adding and removing items).

An observableArray is a knockout.js construct similar to a regular array in JavaScript, except that it allows for observing changes to the collection (e.g. adding and removing items).

To quote the introduction from the relevant knockout.js documentation:

If you want to detect and respond to changes on one object, you’d use observables. If you want to detect and respond to changes of a collection of things, use an observableArray. This is useful in many scenarios where you’re displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed.

var myObservableArray = ko.observableArray();    // Initially an empty array
myObservableArray.push('Some value');            // Adds the value and notifies observers

To see how you can bind the observableArray to a UI and let the user modify it, see the simple list example.

Key point: An observableArray tracks which objects are in the array, not the state of those objects.

228 questions
6
votes
1 answer

knockoutjs ObservableArrays and sort function: UI is not updated

In my viewmodel, I have a knockoutjs ObserableArray. Just after I initialized the ViewModel, it binds the data successfully. Then, what I need to do is to sort the collection. $.each(vm.searchResults(), function (i, property) { …
tugberk
  • 57,477
  • 67
  • 243
  • 335
5
votes
2 answers

how do i insert element in knockout array at specific index

how do i insert element in knockout array at specific index I understand we have to use slice and push, but what is the best way and how to insert new element at specific position in observable array
ritzy
  • 61
  • 1
  • 4
5
votes
2 answers

Removing Self From observableArray in knockoutJS

I'm using knockoutjs to create a treeview of divisions. Next to each node will be three buttons: 1)New child(applies to the node it's next to 2) Remove(This removes the node it's next to, and 3) Copy, which copies the node and all it's children and…
Frank B
  • 661
  • 1
  • 9
  • 20
4
votes
1 answer

Is it possible to break out of a ko foreach binding before rendering is completed?

this is my first post on SO, so please go easy on me :) I am building a web app with Durandal.js and I have a situation where I am running a simple knockout foreach data-bind that iterates over a ko.observableArray and composes child views for each…
jbgarr
  • 1,378
  • 1
  • 12
  • 23
4
votes
0 answers

Memory leak when using observable array with huge data in knockout

I am having the following observable arrays in my view model: VM.ListingData([]); VM.ResumeListingData([]); ListingData will hold 20 columns x 100 rows of parsed JSON object. I am binding a grid using ResumeListingData in the following way in…
4
votes
1 answer

knockout mapping > mapped arrays always updated

Fiddler here: http://jsfiddle.net/u9PLF/ I got a list of parents with nested children. I periodically update the whole object hierarchy and update the first parent's children array once. The problem I'm having is that it seems like the children…
4
votes
2 answers

Memory leak with observableArray and foreach binding

We have a SPA that fetches small batches of items via AJAX and uses them to populate a knockout observableArray that is bound to the DOM via foreach. When new data arrives we clear the old array using removeAll() and push the new items in. Using the…
Will Jenkins
  • 9,507
  • 1
  • 27
  • 46
4
votes
1 answer

Using DatePicker with Knockout observable array

Using the Editable Grid Example from Knockout, and tying in the Steve Sanderson blog, I am trying to get a DatePicker or datetimepicker to work within the editable grid. I started by using the datepicker binding set up by Ryan Niemeyer, but this…
rayk
  • 81
  • 1
  • 2
4
votes
1 answer

Hasfocus binding issues with Firefox

I'm working on an app that utilizes an observable array to present an editable table of userID information. The app works fantastic in Chrome, but I'm having issues getting it to work with Firefox. For my purposes, these two browsers are the only…
SteveHNH
  • 109
  • 1
  • 9
3
votes
2 answers

Is there a easy way to get dojo/dijit toolkit working with knockout observables?

If I have a declared select ... If the knockout array/bind is initialised prior to the…
JTew
  • 3,149
  • 3
  • 31
  • 39
3
votes
1 answer

Populating a dropdown with an observable array in knockout.js

I have X number of dropdowns that I dynamically created using Knockout, and now I want to preselect one option per dropdown. Coincidentally, I have an observable array with X entries that correspond to the options I want selected. How can I use this…
user3757174
  • 483
  • 2
  • 8
  • 17
3
votes
4 answers

observableArray replace not updating UI

Can you guys help me debug why when I call replace it is not being reflected upon the UI. The ****** in the checkout function is where I call replace. In the index I am looping through my observableArray to display the items. Current the UI will on…
AustinT
  • 1,998
  • 8
  • 40
  • 63
3
votes
1 answer

How to subscribe to child observable from parent observable in Knockout

I have an KO observables like this DEMO var list = function(){ var array = [{val :'1'}, {val :'2'}, {val :'3'}, {val :'4'}]; var that = this; this.inputs = ko.observableArray(); array.forEach(function(obj){ var val =…
Sarath
  • 9,030
  • 11
  • 51
  • 84
3
votes
1 answer

Adding a new object to knockout observable array

I am using John Papa's SPA source code to make my own app. I now have a problem where I want to add a new object to my observable array. I am finding this difficult because in my code there are loops for number of offices and contacts. So when I add…
3
votes
1 answer

Table not updated when ko.observablearray changes

I'm binding a ko.observablearray to a table. Each object (called a 'group') in the array is bound to a table. Each group holds another (non-knockout) array of codes. Each code is bound to a row. Each code has a boolean, bound to a checkbox. If…
ATayloe
  • 170
  • 7
1
2
3
15 16