Knockout.js映射。如何仅更新视图模型的一部分?

时间:2012-02-25 14:37:43

标签: javascript knockout.js knockout-mapping-plugin

我想构建一个简单的页面,用户可以从列表中选择一张照片并修改一些属性,所以我构建了模型:

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

和标记:

               <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>

主要想法是,当用户点击照片时,setCurrent函数被调用,我可以使用视图模型更新currentPhoto点击绑定传递到setCurrent但是有问题 ko.mapping.fromJS(jsObj, viewModel)(我可以从源头看到)期望viewModel将是根模型。 我知道我可以手动浏览所有可观察对象并刷新它们的值,或者取消映射rootModel,设置属性然后更新root,但我相信有更复杂和更优雅的方法来执行此操作。

谢谢。

1 个答案:

答案 0 :(得分:1)

将当前照片设置为可观察对象,然后您可以使用map来加载带有JSON详细信息的observable。

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

这是一个有效的JSFiddle来演示:

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