Question

我使用foreach绑定将Bootstrap选项卡绑定到KnockoutJS可观察数组，这样可以正常工作。我现在想从活动选项卡中启动一个Bootstrap模式。

<div class="tab-content">
    <!-- ko foreach: trueData -->       
    <div class="tab-pane fade in" data-bind="css:{active: $index() == 0}, attr :{'id': 'tab' + $index()}">
    </div>
</div>

为此，Bootstrap模态代码必须放在TABS div内，但这是针对this "Modal markup placement" rule的。

当我这样做时，只打开第一个标签内的模态。其他标签中的模态无法打开。

这是什么解决方法？是否有办法获取活动标签的索引并单独执行foreach并根据它过滤掉敲除数组？

Answer 1

我建议使用完全不同的模式。

在$root视图模型的级别使用一个 Bootstrap模式。此模式显示根视图模型可观察currentModalItem的数据，并在该observable为null时隐藏。通过从选项卡内部设置observable来激活模态。

这确实需要自定义模式绑定，但创建或修改并不困难。我的示例使用the custom binding from another answer by @huocp，但您可以根据需要进行更改。

以某种方式执行标签也很有用，下面的示例使用基于this answer by @RPNiemeyer的版本。

以下是一个例子：

＆＃13;

ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });

        var value = valueAccessor();
        if (ko.isObservable(value)) {
            $(element).on('hide.bs.modal', function() {
               value(false);
            });
        }
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
           $(element).modal("destroy");
        });

    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }
    }
}

var ItemViewModel = function(data, initiallySelected) {
  this.isSelected = ko.observable(!!initiallySelected);
  this.txt = ko.observable(data);
};

var RootViewModel = function() {
  var self = this;
  
  self.currentModalItem = ko.observable(null);
  
  self.items = ko.observableArray([new ItemViewModel("Apples", true), new ItemViewModel("Oranges"), new ItemViewModel("Pears")]);
  
  self.selectItem = function(item) {
    self.items().forEach(function(i) { i.isSelected(false); });
    item.isSelected(true);
  };
  
  self.openModal = function(item) {
    self.currentModalItem(item);
  };
};

ko.applyBindings(new RootViewModel());

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="modal fade" data-bind="modal: !!currentModalItem(), with: currentModalItem">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>You opened item: <i data-bind="text: txt"></i></p>
      </div>
    </div>
  </div>
</div>

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" data-bind="foreach: items">
    <li data-bind="css: { active: isSelected }">
      <a href="#" data-bind="text: txt, click: $parent.selectItem"></a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content" data-bind="foreach: items">
    <div class="tab-pane" data-bind="css: { active: isSelected }">
      <h3 data-bind="text: txt"></h3>
      <p><a href="#" data-bind="click: $root.openModal">Open Modal!</a></p>
    </div>
  </div>
</div>

＆＃13;

是的，它还不完美（但是），但上面的内容应该让你开始。

使用Knockout foreach从Bootstrap选项卡内部的模态

1 个答案: