Question

我刚刚开始使用Knockout，我在这里做了一些搜索并尝试了一些解决方案，但是找不到一个有效的解决方案。我试图显示一个组件实例列表（恰好称为目录 - 但不像文件夹，它是一个联系人目录）。

无论如何，单个目录可以包含任意数量的子目录（因此最终需要递归）。我只需要向用户显示目录层次结构，然后在添加新目录时更新它。听起来很简单。

但是，我无法将数据作为嵌套列表显示在视图中。现在我愿意放弃嵌套，只是获得顶级名单。我能够正确地从服务器返回数据，并将其传递给ViewModel。我可以console.log数据及其罚款。

这是一个链接到相关信息的小提琴（减去结构中的子目录，但它们只是在subDirectories的键下，与顶层具有相同的数据，只有不同的值）。

视图模型：

var directories;

function DirectoryListViewModel(data) {
  var directoryMapping = {
    "name": {
      "create": function(options) {
        return ko.observable(options.data);
      }
    }
  };

  for (var i = 0; i < data.length; i++) {
    console.log(data[i].name);
  }

  ko.mapping.fromJS(data, directoryMapping, this);
}
// I hard coded the actual data coming back from ther server, as the server call from here will not work.

/*fetch('#URL#', {method: "POST", credentials: "include"})
.then(function(allData) {
    return allData.json();
})
.then(function(data){
    var parsedData = JSON.parse(data);
    var directoryData = $.map(parsedData, function(item) { return item });
    console.log(directoryData);
    directories = new DirectoryListViewModel(directoryData);
    ko.applyBindings(directories, $('#directories').get(0));
}); */

var directoryData = [{
  "summary": "",
  "name": "Staff",
  "dspRandom": false,
  "description": "",
  "dspTitle": true,
  "priority": 1,
  "dspLimit": 0,
  "childName": "",
  "dspHome": false,
  "dateLastEdited": "May, 26 2016 14:03:37",
  "id": 2,
  "dsp": true,
  "dateCreated": "March, 01 2016 14:03:54",
  "url": "staff",
  "title": ""
}];
// I shortened the directoryData for brevity, but it just would have more entries. See the fiddle for more.

console.log(directoryData);
directories = new DirectoryListViewModel(directoryData);
ko.applyBindings(directories, $('#directories').get(0));

标记：

<div class="nestable-white dd" id="directories">
  <ol class="dd-list">
    <li class="dd-item">
      <div class="dd-handle" data-bind="text: name"></div>
    </li>
  </ol>
</div>

https://jsfiddle.net/HunterJoe/dzfv5zn0/1/

Answer 1

添加了数组：

function DirectoryListViewModel(data) {
    var self = this;

    self.directories = ko.observableArray();

    if (data != null)
       ko.mapping.fromJS(data, directoryMapping, self);
}

更新对象：

directories = new DirectoryListViewModel({directories : directoryData });

HTML：

  <ol class="dd-list" data-bind="foreach: directories">
    <li class="dd-item">
      <div class="dd-handle" data-bind="text: name"></div>
    </li>
  </ol>

你谈到子文件夹 - html看起来像这样

  <ol class="dd-list" data-bind="foreach: directories">
    <li class="dd-item">
      <div class="dd-handle" data-bind="text: name"></div>
      <ol class="dd-list" data-bind="foreach: subdirectories">
          <li class="dd-item">
              <div class="dd-handle" data-bind="text: name"></div>
          </li>
      </ol>
    </li>
  </ol>

查看我的更新：

https://jsfiddle.net/dzfv5zn0/2/

function DirectoryListViewModel(data) {
    var self = this;

    self.directories = ko.observableArray();

    if (data != null)
       ko.mapping.fromJS(data, { directories: directoryMapping }, self);
}

function DirectoryModel(data) {
    var self = this;

    self.name = ko.observable('');
    self.subDirectories = ko.observableArray();

    if (data != null)
       ko.mapping.fromJS(data, { subDirectories : directoryMapping }, self);
}

var directoryMapping = {
   create: function (options) {
        return new DirectoryModel(options.data);
   }
}

来自knockout viewModel的数据未显示

1 个答案: