0

I would like to use the knockout mapping plugin but I need the objects on my model to be properties in themselves (mostly because they need to be substitute-able).

Consider a greatly simplified example with the following model:

{
  family: {
    patriarch: {
      name: "Fred Flintstone", child: "Pebbles"
    }
  },
  allPeople: [
    {name: "Fred Flintstone", child: "Pebbles"},
    {name: "Wilma Flintstone", child: "Pebbles"},
    {name: "Barney Rubble", child: "Bam Bam"}
  ]
}

Suppose I want to be able to modify the patriarch via a select where the options are allPeople where changing the selection might have many side-effects.

The mapping plugin makes all name properties observable and allPeople an observableArray but in order for my select to work properly the patriarch object itself would have to be observable.

Writing my own crude mapper is all of 13 lines of code but since the mapping plugin is so fully featured I am hoping there's an option or some other way to get this seemingly common scenario working.

1 Answer 1

1

How about this? For the select:

<select data-bind="options: allPeople, optionsText: 'name', value: family.patriarch"></select>

And when setting up the mapping, rather than specifying a sub view model for the patriarch property, return an observable using the initial data:

var data = {
  family: {
    patriarch: {
      name: "Fred Flintstone", child: "Pebbles"
    }
  },
  allPeople: [
    {name: "Fred Flintstone", child: "Pebbles"},
    {name: "Wilma Flintstone", child: "Pebbles"},
    {name: "Barney Rubble", child: "Bam Bam"}
  ]
};


var mapping = {
    'patriarch': {
        create: function (options) {
            return ko.observable(options.data);
        }
    }
}

var vm = ko.mapping.fromJS(data, mapping);

vm.family.patriarch.subscribe(function(value) {
    alert(ko.toJSON(value));
});

ko.applyBindings(vm);

Fiddle here:

http://jsfiddle.net/SZXDG/6/

Does that work as you need it?

8
  • The value for vm.family.patriarch is being set to the first object in allPeople. For instance, if you change the value of data.family.patriarch.name to "Wilma Flintstone", "Fred Flinstone" will still appear in the alert box. Dec 16, 2012 at 21:08
  • If you add "alert(ko.toJSON(options.data));" into the create method you can see that it is defaulting the observable to the correct data, but apparently the binding of the select is not quite right because the subscribe fires immediately showing that the underlying selected value has been reset to the first entry. But subsequent changes do change the observable's value correctly. I'll have a go at sorting the select binding.
    – Tom W Hall
    Dec 16, 2012 at 21:58
  • This seems to also not work with a directly constructed view model, i.e. one not made using the mapping plugin. Check out this fiddle: jsfiddle.net/82vsf/3 which is using the example from the documentation here: knockoutjs.com/documentation/options-binding.html except that it is setting an initial value for the observable and there is no unselected option.
    – Tom W Hall
    Dec 16, 2012 at 22:36
  • I emailed Ryan Niemeyer to see if he can help with the above binding of the initial value to the select.
    – Tom W Hall
    Dec 17, 2012 at 1:29
  • The problem with the select tag bindings are that the instance of patriarch, generated by the ko.mapping plugin, is different from the corresponding instance in allPeople. Since a match cannot be found for the selected value, it defaults to the first one. We can work around this by setting the patriarch value to a specific instance from allPeople. Here is an example: jsfiddle.net/SZXDG/11 Dec 17, 2012 at 1:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.