Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ko.mapping create function, extend object

Is it possible to modify the (for lack of a better term) schema of an object during the mapping process? I would imagine it is, I just can't seem to get it to work. I'm trying something like this:

var data = {
    itemOne: 'someData',
    itemTwo: 'moreData'
}

var mapping = {
    "newItem": {
          create: function(options) {
            return ko.observable(false);
          }
    }
};

ko.mapping.fromJS(data, mapping, _model.observableArrayPart);
like image 880
farina Avatar asked Mar 20 '12 00:03

farina


People also ask

What does Ko unwrap do?

unwrapObservable(item) Looking at the code, that call basically checks to see if item is an observable. If it is, return the value(), if it's not, just return the value.

What is Ko applyBindings?

The ko. applyBindings method activates Knockout and wires up the view-model to the view. Now that we have a view-model, we can create the bindings. In Knockout.js, you do this by adding data-bind attributes to HTML elements.

What is Ko observable ()?

An observable is useful in various scenarios where we are displaying or editing multiple values and require repeated sections of the UI to appear and disappear as items are inserted and deleted. The main advantage of KO is that it updates our UI automatically when the view model changes.

How do you set a value in Ko observable?

To write a new value to the observable, call the observable and pass the new value as a parameter. For example, calling myViewModel. personName('Mary') will change the name value to 'Mary' . To write values to multiple observable properties on a model object, you can use chaining syntax.


1 Answers

Here is a sample that shows customizing how your array is creating and defining a key for it, so that you can apply updates using the mapping plugin: http://jsfiddle.net/rniemeyer/LHeQZ/

var data = [
    { id: 1, first: "Bob", last: "Smith" },
    { id: 2, first: "Jim", last: "Jones" },
    { id: 3, first: "Delete", last: "Me" }
];

var updatedData = [
    { id: 1, first: "Robert", last: "Smith" },
    { id: 2, first: "James", last: "Jones" },
    { id: 4, first: "New", last: "Guy" }
];

var Person = function(data) {
    this.id = data.id;
    this.first = ko.observable(data.first);
    this.last = ko.observable(data.last);
    this.full = ko.computed(function() {
        return this.first() + " " + this.last();
    }, this);        
};


var dataMappingOptions = {
    key: function(data) {
        return data.id;        
    },
    create: function(options) {
        return new Person(options.data);
    }        
};


var viewModel = {
    people: ko.mapping.fromJS([]),
    loadInitialData: function() {
        ko.mapping.fromJS(data, dataMappingOptions, viewModel.people);        
    },
    loadUpdatedData: function() {
        ko.mapping.fromJS(updatedData, dataMappingOptions, viewModel.people);  
    }        
};

ko.applyBindings(viewModel);
like image 156
RP Niemeyer Avatar answered Oct 01 '22 22:10

RP Niemeyer