基于Knockout foreach的自举表盘模态分析

Question

我使用KnockoutJS绑定将引导选项卡绑定到一个可观察到的foreach数组，该绑定运行良好。现在，我想从active选项卡中启动一个引导模式。

<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>

为此，引导模式代码必须放在制表符div中，但这是针对这个“模式标记放置”规则的。

当我这样做时，只会打开第一个选项卡中的模式。其他选项卡中的模式不打开。

解决这个问题的办法是什么？是否有一种方法可以获取活动选项卡的索引，并在此基础上执行单独的foreach和筛选绑定敲除数组？

Answer 1

我建议对此采用完全不同的模式。

在$root视图模型的级别上使用一个引导模式。该模型显示可观察到的根视图模型的数据，当可观测的currentModalItem为null时隐藏。通过设置从制表符内部可观察到的模式来激活该模式。

这确实需要一个自定义的模态绑定，但是创建或修改并不困难。我的示例使用来自@huocp的另一个答案的自定义绑定，但您可以根据需要而有所不同。

以某种方式完成选项卡也很有用，下面的示例使用了基于@RPNiemeyer的回答的版本。

下面是一个例子：

​

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());

<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>

​

的确，这还不完美(目前)，但以上所述应该会让您开始工作。