Turn certain observableArray objects properties into observable

Question

Say I have this array of same-type objects:

var people = [
    { status: 0, name: "name1"},
    { status: 1, name: "name2"}
];

and I want it not only to be observableArray, but also I want to observe ONLY, say, status property of each object.

Imagine that the objects themselves might be added or deleted. The name property of any of those objects is not going to change so I don't really need to observe the name but the status of every object might get changed, thus it'd be cool to make it observable.

Is it possible to map it with knockout utilities with some cool hack syntax or do I have to either iterate through every object and map its status property into observable or have the whole array and its objects properties observable?

Damien · Accepted Answer · 2013-07-29 14:05:29Z

5

You can use ko.mapping.fromJS

var vm = ko.mapping.fromJS(people,{
    create: function(options){    
        return {
            status : ko.observable(options.data.status), // observable
            name: options.data.name, // non observable
        }
    }
});

Now vm is an observableArray that contains objects in which status is an obsevable and name is a regular property.

See fiddle

@Patryk :

You could do that, if you have many properties and you want to convert only one into observable.

var o = ko.mapping.fromJS(people,{create: function(options){
    // clone item
    var item = ko.utils.extend(options.data, {});
    // replace status property by an observable 
    item.status = ko.observable(options.data.status);
    return item;
}});

See updated fiddle

You could also use observe with mapping parameter

var mapping = {
    create: function (options) {
        return ko.mapping.fromJS(options.data, {'observe': ["status"]});
    }
};
var o = ko.mapping.fromJS(people, mapping);

See fiddle

I hope it helps.

edited Jul 29, 2013 at 14:05

answered Jul 29, 2013 at 13:29

Damien

8,9873 gold badges34 silver badges43 bronze badges

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

3 Comments

patryk Over a year ago

And what if the object has way more properties out of which I want just one to be observable, do I need to explicitly list each property regardless whether observable or not?

patryk Over a year ago

Came to something like this but your way looks more professional :D what I am curious about again is a simple thing: is var vm = ko.mapping.fromJS(data, {}); the same as var vm; ko.mapping.fromJS(data, {}, vm);

Damien Over a year ago

The first call is for the initial call, and second is for update. Update "means" when you receive "fresh" data from the sever and you need to update an existing viewmodel.

ebram khalil · Accepted Answer · 2013-07-29 14:06:14Z

1

I suggest use copy

so you can provide array of the properties you want to not be observables.

var mappingPeople = {
    'copy': ["name"]
};

var mapping = {
    create: function (opts) {
        return ko.mapping.fromJS(opts.data, mappingPeople);
    }
};
var PeopleArr = ko.mapping.fromJS(people, mapping);

here is Working Demo

Update

In case you need to mark one property as observable and the rest 'll be normal properties then i suggest to use observe.

here is an update to my Example using observe

edited Jul 29, 2013 at 14:06

answered Jul 29, 2013 at 13:49

ebram khalil

8,3197 gold badges45 silver badges60 bronze badges

3 Comments

patryk Over a year ago

That still makes me need to list all the properties that I do not want to be observables, which are the majority. My goal was to name only those that I want to observe. I did it in a manner that Damien suggested, not exactly that clear and knockout-like, but it worked.

ebram khalil Over a year ago

@patryk in that case you need to use 'observe' knockoutjs.com/documentation/…

patryk Over a year ago

Observe was my first shot, unfortunately I couldn't apply that to an array. Anyway, comparing the two approaches from Damien his answer, which is more efficient when it comes to situation that the object contains many properties?

Pietro Coelho · Accepted Answer · 2014-10-06 22:43:01Z

I know this question is old, but I faced the same problem and found a simple solution without using any plugins.

Let's say you do a get request, and get returned an array of posts. For each entry, you have a property called "Favorited", which is a boolean indicating if the post is favorited by the user or not, and you want to make this property observable so you can work in some function that change its state.

You could do the following:

function ViewModel() {
  var self = this;
  self.posts = ko.observableArray([]);

  $.getJSON("/api/getPosts", function(data) {
   ko.utils.arrayForEach(data, function(post) {
    post.Favorited = ko.observable(post.Favorited)
   });
   self.posts(data)
  });
}

This way you turn the favorited property an observable with its value, and you can turn any property observable doing the same thing inside the arrayForEach method.

Collectives™ on Stack Overflow

Turn certain observableArray objects properties into observable

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related