从现有ViewModel中的数组项实例化ViewModel

Question

我刚刚开始搞乱淘汰赛(技术要求)，我正试图建立一个具有一些自定义功能的画廊。

数据来自json响应，该响应表示一个图库(标题、描述等)，并且在图库对象中是幻灯片数组。

尝试和分离的关注，我想有一个基于画廊的ViewModel和一个单独的幻灯片ViewModel。

但我不确定如何在对象内的数组上实例化幻灯片ViewModel。

在早期版本中，我试图循环幻灯片数组但不确定我如何物理执行我要做的就是在slides数组中的每个slide对象上设置一个SlideViewModel的新实例

任何帮助都是感激的。链接:http://codepen.io/pbj/pen/MaoLMb

这里的代码:

JS

var testGallery = {
  "title" : "Anna's Gallery Title",
  "slides" : [
    {
      "title": "Slide Image #1",
      "image" : "http://google.com/image/goes/here"
    },
    {
      "title": "Slide Image #1",
      "image" : "http://google.com/image/goes/here"
    },
    {
      "title": "Slide Image #1",
      "image" : "http://google.com/image/goes/here"
    },
    {
      "title": "Slide Image #1",
      "image" : "http://google.com/image/goes/here"
    },
  ]
}
function GalleryViewModel(data) {
  // gallery functions
  this.title = ko.observable(data.title);
}
function SlideViewModel() {
 // slide functions here
 this.name = ko.observable(data.slides.title);
}
var gallery = new GalleryViewModel(testGallery);
ko.applyBindings(gallery);

Answer 1

您应该创建slide的子函数来实现您正在查看的内容。

viewModel:

 function GalleryViewModel(data) {
        var self = this;
        self.title = ko.observable(data.title);
        self.caption = ko.observable(data.caption);
        self.slides = ko.observableArray();
        self.totalSlides = ko.observable(data.totalSlides);
        self.slides($.map(data.slides, function (n) { //mapping my child function in here
            return new slide(n);
        }))
    }
    function slide(data) { //child function
        this.title = ko.observable(data.title);
        this.image = ko.observable(data.image);
        this.position = ko.observable(data.position);
    }
var gallery = new GalleryViewModel(annasGallery);
ko.applyBindings(gallery);

working sample up here for grabs

你可以借助映射插件，这将是在单行(根据你的代码)中完成的另一种方式

代码:

ko.applyBindings(ko.mapping.fromJS(annasGallery));

使用映射插件 检查示例在这里

PS:就我所见，没有什么是可编辑的，你可以绑定平面js数组到视图(不必要的使用可观察的会变得昂贵)