Question

我有一个像下面这样的多维数组

element.addEventListener("focus", function () {
    setTimeout(function(node) {
        node.parentNode.parentNode.style.outline = node.parentNode.parentNode.dataset.ans_outline;
    }(this), 1000)
});

在上面的结构中，我想从第一个数组中删除"ContactsList":[[{"id":73,"title":"IT Manager"},{"id":74,"title":"Manager"}], [{"id":75,"title":"Developer"},{"id":76,"title":"Salesperson"},{"id":77,"title":"Person"}]]第一个对象，但是淘汰赛不允许我这样做。

Answer 1

没有看到完整的代码，我猜，但我想我理解这个问题。

可观察数组仅观察数组的元素。它没有观察元素的内容，除非你特意让它们可以观察到。

例如，您可以更改任何对象上的id或title值，并且不会触发更新。 Knockout被告知只能观察数组项目。

您还需要将每个嵌套数组映射到一个可观察数组。这样做意味着删除嵌套数组中的项将触发knockout的绑定。以下是一些示例代码：

var contactsList = [
  [{
    "id": 73,
    "title": "IT Manager"
  }, {
    "id": 74,
    "title": "Manager"
  }],
  [{
    "id": 75,
    "title": "Developer"
  }, {
    "id": 76,
    "title": "Salesperson"
  }, {
    "id": 77,
    "title": "Person"
  }]
];

var viewModel = function(data) {
  var self = this;

  // convert nested-arrays to observable arrays
  var tmp = ko.utils.arrayMap(data, function(item) {
    return ko.observableArray(item);
  });
  // main array 
  self.Data = ko.observableArray(tmp);
  self.Error = ko.observable("");
  self.RemoveFirst = function() {
    // get first element - should be an observableArray
    var first = self.Data()[0];
    // check it's not null
    if (first) {
      console.log(typeof first);
      console.log("item: " + ko.toJSON(first));
      // get first sub-element
      var subelement = first()[0];
      if (subelement) {
      	first.remove(subelement);
        //first.remove(subelement);
        self.Error("Removed " + ko.toJSON(subelement));
        // might want to check for empty array and remove 'first' here
      }
    } else {
      self.Error("No items");
    }
  }
};

var vm = new viewModel(contactsList);
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: Data">
  <b>Item <span data-bind="text: $index"></span></b>
  <p>
  
  </p>
  <ul data-bind="foreach: $data">
    <li>
      <span data-bind="text: id"></span>&nbsp;
      <span data-bind="text: title"></span>
    </li>
  </ul>
  <hr/>
</div>
<button data-bind="click: RemoveFirst">
  Remove First
</button>
<div style="color: red" data-bind="text: Error">
</div>

使用knockout从多维数组中删除项目

1 个答案: