knockout.mapper.js

1.7.0 • Public • Published

knockout.mapper.js

Knockout.mapper.js is a very simple plugin for knockout allowing you to:

  • map object to a view model including validation, static fields, computed values, functions and custom bindings
  • update a view model's values based on a model prototype
  • can reset observables to the initial values they have been created by
  • exports JSON by a model prototype

License: MIT

Usage

// Let's have a model prototype. (could have been received from server-side or define any way you want to...)
var obj = {};
// Knockout static properties
obj.statics = {
    "prop": "val"
};
// Knockout data model itself - including custom bindings
obj.dataModel = {
    firstName: "Planet",
    lastName: "Earth",
    fullName: function() {
        return this.firstName() + " " + this.lastName();
    },
    name:{
        read: function () {
            return this.firstName() + " " + this.lastName();
        },
        write: function (value) {
            var lastSpacePos = value ? value.lastIndexOf(" ") : 0;
            if (lastSpacePos > 0) { // Ignore values with no space character
                this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
                this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
            }
        },
        owner: this
    }
};
// Knockout methods to be added to the model
obj.methods = {
    capitalizeLastName: function() {
        var currentVal = this.lastName();
        this.lastName(currentVal.toUpperCase());
    },
    init: function(){
        console.log('Helloka!');
    }
};
// validation rules defined
obj.validation = {
    firstName: { required: true, type: "alphanum" },
    lastName: { notblank: true, type: "alphanum" }
};
 
var viewModel = {};
 
// map your JS object to have a knockout viewmodel
ko.mapObject( viewModel, obj.dataModel, obj.validation, obj.methods, obj.statics );
 
// apply bindings as usual
ko.applyBindings( viewModel );
 
obj.dataModel.firstName = "Universe";
// updating the viewmodel based on some changes might received from server-side
ko.updateViewModel( viewModel, obj.dataModel );
 
// resets the firstName and lastName to the initial values "Planet" and "Earth"
ko.resetViewModel( viewModel );
 
// print out the JSON containing only the fields possessed by the prototype passed by. Much faster, than the toJSON of knockout and can be targeted only content you are really interested in
console.log( ko.toJSONByPrototype( viewModel, obj.dataModel ) );

/knockout.mapper.js/

    Package Sidebar

    Install

    npm i knockout.mapper.js

    Weekly Downloads

    2

    Version

    1.7.0

    License

    MIT

    Last publish

    Collaborators

    • imre.fazekas