我想建立一个简单的页面,用户可以从列表中选择一张照片并修改一些属性,所以我建立了模型:
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,但我相信有更复杂和优雅的方法来做到这一点。
谢谢你。