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
45
votes
2 answers

Replace all elements in Knockout.js observableArray

I have an observableArray in my view model. After creating the vm I wish to completely replace the data the observableArray. Here's how I'm doing it: //Initial Setup var vm = {}; vm.roles = ko.observableArray([]); ko.applyBindings(vm);…
C.J.
  • 6,789
  • 7
  • 36
  • 45
44
votes
5 answers

How to create a computed observable array in Knockout

I would like to know how to create a computed observable array. In my view model, I have 2 observable arrays, and I would like to have a computed observable array that is simply both arrays combined. function ViewModel() { var self = this; …
Matt Mangold
  • 710
  • 1
  • 6
  • 10
35
votes
3 answers

Replacing item in observableArray

I'm trying to replace all of the contents of an item in an observableArray with new content. var oldLocation = ko.utils.arrayFirst(self.locations(), function (item) { return item.id ==…
bflemi3
  • 6,698
  • 20
  • 88
  • 155
30
votes
3 answers

KnockoutJS - Observable Array of Observable objects

I would like to display an editable list of items, each item of which is editable (kind of like an editable grid, in a way). I am using KnockoutJS. I cannot use just a simple Observable Array because, as the documentation states "An observableArray…
Andy Thomas
  • 1,367
  • 2
  • 14
  • 30
20
votes
1 answer

Knockout - Using foreach and sort together

I am having trouble combining the foreach binding with a sort. I have a list bound like so:
Widgets is a simple obvservable array: var widgets= ko.observableArray(); This works nicely giving me a list of…
daveywc
  • 3,136
  • 7
  • 45
  • 58
13
votes
2 answers

ko.Computed() is not updating with observableArray

I have the following code: // First we define our gift class, which has 2 properties: // a Title and a Price. // We use knockout js validation to ensure that the values input are suitable/ function Gift(item) { var self = this; self.Title =…
Scott
  • 924
  • 3
  • 8
  • 28
9
votes
1 answer

Knockout ObservableArray not updating HTML Foreach

So I've got an observablearray that works fine, but the UI doesn't update. I've read lots of people running into this TYPE of issue, but I'm not seeing it. So the HTML is …
user3314493
  • 93
  • 1
  • 3
9
votes
5 answers

Knockout Observable Array Length always 0

When calling the length of any observable in the customerOverview view model I receive a length of zero. There is data present in the observables as the bindings update with data, however the length remains at 0. The base view model,…
Strake
  • 702
  • 1
  • 8
  • 18
8
votes
2 answers

Why can not I concat data to observable array in knockout

I am trying to add elements from the server to observable array in knockout. Here is my ViewModel: function ArticlesViewModel() { var self = this; this.listOfReports = ko.observableArray([]); self.loadReports =…
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753
8
votes
3 answers

add object to observable array using knockout

For some reason i'm having trouble passing an object to observable array. function CalendarViewModel() { var self = this; self.event = { name : ko.observable(""), adress : ko.observable(""), startTime : ko.observable(""), endTime :…
Alan Budzinski
  • 811
  • 3
  • 16
  • 33
8
votes
1 answer

unique items from an observableArray of object properties

I'm trying to extract unique properties from a knockout.js observableArray of objects, to populate a drop menu. Being new to knockout, I'm really struggling with this! I want to iterate over a contacts list, and populate a drop menu with a unique…
Joe
  • 127
  • 1
  • 2
  • 9
8
votes
2 answers

Knockout observableArray in TypeScript

What is the proper way to initialize a Knockout observableArray in a TypeScript class? I am doing something like this: module ViewModel { declare var ko; export class IndexPageViewModel { agencies: any; …
Klaus Nji
  • 18,107
  • 29
  • 105
  • 185
7
votes
2 answers

Knockout.js ObservableArray sort not updating UI

I have a Knockout observable array that refuses to update the UI (a jquery Accordion) to which it is bound after a .sort() call, but happily updates the UI after a .reverse() call - I've been banging my head against this problem for days - can't…
andrewe
  • 83
  • 1
  • 1
  • 5
6
votes
3 answers

Unsubscribe in Observable KnockOutJS

Im currently using KnockOut JS and i conducted some research about when the observable is notified it will fire a function which is like this function FunctionToSubscribe() { } var TestObservable =…
Don
  • 131
  • 1
  • 10
6
votes
3 answers

Static row above knockout.js observable array table

I have a html table and the rows come form an observable array.... etc.... How can I skip the first row... so I can add a static row (not a header) to the…
user3147424
  • 3,022
  • 5
  • 19
  • 22
1
2 3
15 16