Question

我刚开始搞乱淘汰赛（技术要求），我正在尝试建立一个带有一些自定义功能的图库。

数据来自代表一个图库（标题，描述等）的json响应，并且在图库对象中，是一系列幻灯片。

尝试分离关注点我很想拥有一个基于库的ViewModel和一个单独的幻灯片ViewModel。

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

在早期版本中，我试图遍历幻灯片数组，但不确定我是如何实际执行我正在尝试做的事情，即在每个slide对象上设置一个新的SlideViewModel实例。 slides数组

任何帮助都表示赞赏。 Codepen：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的子功能来实现你所看到的目标。

<强>视图模型：

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

here 用于获取

的工作样本

您可以获取 mapping plugin 的帮助，这可以通过其他方式在单行中完成（根据您的代码）

<强>码

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

使用映射插件检查示例 here

PS：到目前为止，我看不出任何可编辑的内容，您可以将平面js数组绑定到视图（不必要的observable使用会变得昂贵）

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

JS

1 个答案: