Knockout.js mapping. How to update only part of view model?

Question

I want to build simple page where user can select one photo from list and modify some properties, so i had built the model:

model = {
            newPhotos: [],
            currentPhoto: {
                id: 0,
                description: ""
            },
            setCurrent: function (photo, e) {
                ko.mapping.fromJS(ko.mapping.toJS(photo), viewModel.currentPhoto);
            }
      }

and markup:

               <div class="content" data-bind="foreach: newPhotos">
                    <div class="photo" data-bind="click: $parent.setCurrent">
                        <div class="frame" data-bind="img: imageSrc">
                        </div>
                    </div>
                </div>
        <div class="edit-area" data-bind="with: currentPhoto">
            <canvas id="image-edit" />
            <textarea class="multi-line" name="PhotoDesc" data-bind="value: description"></textarea>
        </div>

Main idea is that when user click on photo, setCurrent function called and there i can update currentPhoto with view model that click binding pass into setCurrent, but there is problem ko.mapping.fromJS(jsObj, viewModel) (as i can see from source) expecting that viewModel will be root model. I know that i can manually go through all observables and refresh their values, or unmap rootModel, set property and then update root, but i belive that there is more complex and elegant way to do this.

Thank you.

Answer 1

Set up your current photo as an observable, and then you can use map to load the observable with JSON details.

  self.currentPhoto(ko.mapping.fromJS(data)); 

Here's a working JSFiddle to demonstrate:

http://jsfiddle.net/jearles/wgZ59/7/