Question

要求：

在我的html方面，我有2个包含数据的表，其数据可以是动态的。用户可以按“保存”将数据保存到数据库。这一切都已设置并正常工作。现在作为附加要求，需要将所有html数据移动到选项卡中。点击一个按钮，需要使用相同的内容创建另一个标签。再次单击相同的选项卡将创建包含内容的另一个选项卡。

之前我没有使用过标签和模板，所以不确定如何处理这个动态内容。我试图将我现有的代码移动到选项卡中。它创建选项卡，但我在选项卡内的内容现在不起作用。目前我已经为静态选项卡设置了它。但我希望在按钮点击时创建动态标签和数据。

这是我能够设置的相同的jsfiddle： http://jsfiddle.net/aman1981/p7fu8pmm/13/

以下是我的标签的示例代码：

<div id="tabs" data-bind="foreach: tabs">
  <div class="tab" data-bind="css: {selected: $parent.selectedTab() == id()}, 
text: name, click: $parent.selectedTab.bind($parent, id())"></div>
</div>

这又是4个静态标签，我可以创建一个。

有人可以在我的jsfiddle工作并帮助我开始。

Answer 1

每个选项卡都需要拥有自己的数据副本，或者在一个选项卡中修改它将在所有选项卡中对其进行修改。您应该做的第一件事是将items和employee数组移动到选项卡对象上（并相应地更新绑定）。初始化新选项卡时，您希望数据来自项目的模板数组，但每个选项卡都会创建自己的副本。

self.templateItems = [{
      id: "1",
      firstName: "Bob",
      lastName: "Hen"
    },
    {
      id: "2",
      firstName: "Henry",
      lastName: "Arman"
    }
  ];

self.Tab = function(id, name, text, selected) {
  var tab = this;
  tab.id = ko.observable(id);
  tab.name = ko.observable(name);
  tab.text = ko.observable(text);
  tab.items = ko.observableArray(self.templateItems.slice()); //create a copy of the template array
  tab.employee = ko.observableArray([]);

  tab.add = function() {
    tab.employee.push(new Employee());
  };

  tab.remove = function(data) {
    tab.employee.remove(data);
  };
  return tab;
};

然后动态添加新标签与添加原始标签没有太大区别。

self.Save = function() {
  self.tabs.push(new self.Tab(self.tabs().length+1, 'New Tab', 'dynamically added tab'));
};

这是jsFiddle

Knockout JS：包含动态内容的动态标签

1 个答案: