Knockout JS mapping plugin without initial data / empty form

by

A couple of options for you besides just manually managing your view model. The mapping plugin supports a create callback that lets you customize how it gets created. This can be used to add default properties to an object, if they happen to be missing.

Something like this: http://jsfiddle.net/rniemeyer/WQGVC/

Another alternative is to use a binding that creates properties that are missing. It might look like:

//create an observable if it does not exist and populate it with the input's value
ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, data) {
        var property = valueAccessor(),
            value = element.value;

        //create the observable, if it doesn't exist 
        if (!ko.isWriteableObservable(data[property])) {
            data[property] = ko.observable();
        }

        //populate the observable with the element's value (could be optional)
        data[property](value);

        ko.applyBindingsToNode(element, { value: data[property] });
    }
}

You would use it like this (need to pass the property as a string, otherwise it will error):

<input data-bind="valueWithInit: 'name'" />

Sample here: http://jsfiddle.net/rniemeyer/JPYLp/

More Related Contents:

  1. Binding true / false to radio buttons in Knockout JS
  2. Difference between knockout View Models declared as object literals vs functions
  3. How do I correctly detect orientation change using Phonegap on iOS?
  4. Resolve circular references from JSON object
  5. How to create an auto-complete combobox?
  6. Knockout.js incredibly slow under semi-large datasets
  7. Change observable but don’t notify subscribers in knockout.js
  8. knockout data-bind on dynamically generated elements
  9. Setting value of Observable not updating in Knockout
  10. How to clear/remove observable bindings in Knockout.js?
  11. make an input only-numeric type on knockout
  12. Knockout + Bootstrap 3 Radio Buttons
  13. When to use ko.utils.unwrapObservable?
  14. combine dynamic and static classes through css binding, knockout.js
  15. Knockout JS – How to correctly bind an observableArray
  16. Javascript Equivalent to C# LINQ Select
  17. knockout.js using $index with if binding
  18. I’m trying to create a web page that contains 3 JavaScript objects
  19. Using the variable “name” doesn’t work with a JS object
  20. How to get the function name from within that function?
  21. How can I refer to a variable using a string containing its name?
  22. Turn a number into star rating display using jQuery and CSS
  23. Is there a way to do method overloading in TypeScript?
  24. JavaScript alert not working in Android WebView
  25. How can I `await` on an Rx Observable?
  26. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  27. Javascript Array.prototype.filter() not working
  28. jquery – How to determine if a div changes its height or any css attribute?
  29. To exceed the ImportXML limit on Google Spreadsheet
  30. Styling Vuetify selectors

Leave a Comment