Knockout.js 使用带敲除的词典

全部,

我对ko还是个新手，所以我对我需要做的事情有点困惑

我的字典包含以下关键字：

包含以下对象的“组1” {地点：奥兰多，日期：2018年10月7日}， {地点：迈阿密，日期：2018年8月22日}

包含以下对象的“组2” {地点：'Tampa'，日期：'09/10/2018'}

我尝试将该键用作标签，每个位置的下方都有一个按钮，将鼠标悬停在上面作为日期（如下示例）：

第一组 |按钮上写着奥兰多，悬停在日期上| |按钮上写着迈阿密，悬停在日期上|

第2组 |按钮上写着坦帕，悬停在日期上|

const dictionary = {
  "Group 1": [
    { location: "Orlando", date: "07/10/2018" },
    { location: "Miami",   date: "08/22/2018" }
  ],
  "Group 2": [
    { location: "Tampa",   date: "09/10/2018" }
  ]
};

Thx

---

jonpfl

首先，让我们将数据描述总结为实际代码：

const dictionary = {
  "Group 1": [
    { location: "Orlando", date: "07/10/2018" },
    { location: "Miami",   date: "08/22/2018" }
  ],
  "Group 2": [
    { location: "Tampa",   date: "09/10/2018" }
  ]
};

现在，根据所需UI的描述，我们可以得出以下viewmodel格式：

function App() {
  this.groups = [];     // A list of groups
}

function Group() {
  this.label = "";      // The name of the group of buttons
  this.buttons = [ ];   // A list of Button viewmodel instances
}

function Button() {
  this.label = "";      // The city name
  this.hoverText = "";  // The date
}

使用它可以构造此视图：

<div data-bind="foreach: groups">
  <div>
    <strong data-bind="text: label">
    <!-- ko foreach: buttons -->
      <button data-bind="text: label, attr: { title: hoverText }"></button>
    <!-- /ko -->
  </div>
</div>

请您把问题说得更清楚一些，不清楚您想要达到什么目的，请您发布您的实际代码。您只是简单地说明了您想要做什么。您还没有指定我们可以提供哪些帮助，特别是因为我们无法看到您的代码。请给我们看看。