Свернуть дважды вызвал шаблон аккордеона

Question

Свернуть дважды вызвал шаблон аккордеона

Все работает, кроме свертывания Bootstrap за пределами этого примера в stackru, я был бы признателен за некоторые предложения.

когда any opened item является clicked в collapse его класс изменяется в следующей последовательности: panel-collapse collapse in > panel-collapse collapsing > panel-collapse collapse in, В правильной последовательности это должно привести к panel-collapse collapse collapsed, Это еще не решено. Проблема в том, что collapse называется дважды.

Какое решение для этого, чтобы я мог использовать его как часть шаблона?

ОБНОВЛЕНИЕ: только один panel-group быть открытыми исключительно. Это теперь решается удалением data-parent Теперь он позволяет открывать несколько панелей одновременно.

Я добавил логин bootstrap.js (строки 608-628):

  // COLLAPSE DATA-API
  // =================

  $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
    var $this   = $(this), href
    var target  = $this.attr('data-target')
        || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
    var $target = $(target)
    var data    = $target.data('bs.collapse')
    var option  = data ? 'toggle' : $this.data()
    var parent  = $this.attr('data-parent')
    var $parent = parent && $(parent)

    console.log("A",data);
    if (!data || !data.transitioning) {console.log("B1");
      if ($parent) { console.log("B2");
          $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
      }
      console.log("B3",$target.hasClass('in'));
      $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
    }
    console.log("C", option);
    $target.collapse(option)
    console.log("D");
  })

Полученный журнал:

а) когда collapse нажимается первый раз, это выглядит испорченным

bootstrap.js:622 A undefined
bootstrap.js:623 B1
bootstrap.js:624 B2
bootstrap.js:627 B3 false
bootstrap.js:630 C Object {toggle: "collapse", bind: "text:displayLabel, attr:{href:idhash}"}
bootstrap.js:632 D
bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 1}
bootstrap.js:630 C toggle
bootstrap.js:632 D

б) когда collapse нажимается в любое другое время

bootstrap.js:622 A Collapse {$element: x.fn.x.init[1], options: Object, transitioning: 0}
bootstrap.js:623 B1
bootstrap.js:624 B2
bootstrap.js:627 B3 true
bootstrap.js:630 C toggle
bootstrap.js:632 D
bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 1}
bootstrap.js:630 C toggle
bootstrap.js:632 D

Правильный вывод должен быть:

а) когда collapse нажимается первый раз

bootstrap.js:622 A undefined
bootstrap.js:623 B1
bootstrap.js:624 B2
bootstrap.js:627 B3 false
bootstrap.js:630 C Object {toggle: "collapse", bind: "text:displayLabel, attr:{href:idhash}"}
bootstrap.js:632 D

б) когда collapse нажимается в любое другое время

bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 0}
bootstrap.js:623 B1
bootstrap.js:624 B2
bootstrap.js:627 B3 (true or false)
bootstrap.js:630 C toggle
bootstrap.js:632 D

Полный код:

var confItems = {};
var childrenLength = 2;
confItems["children"] = new Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
  confItems.children[i] = {};
  confItems.children[i]["idhash"] = "#col-" + (i + 1);
  confItems.children[i]["id"] = "col-" + (i + 1);
  confItems.children[i]["displayLabel"] = "Item " + (i + 1);
  confItems.children[i]["children"] = new Array(childrenLength);
  for (var j = 0; j < childrenLength; j++) {
    confItems.children[i].children[j] = {};
    confItems.children[i]["idhash"] = "#col-" + (i + 1) + "-" + (j + 1);
    confItems.children[i]["id"] = "col-" + (i + 1) + "-" + (j + 1);
    confItems.children[i].children[j]["displayLabel"] = "Item " + (i + 1) + "." + (j + 1);
    confItems.children[i].children[j]["children"] = new Array(0);
  }
}
var viewModel = function() {
  this.tree = ko.observable(confItems);
};
ko.applyBindings(new viewModel());

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="template: {name:'largeTemplate', data: tree}"></div>
<script id='largeTemplate' type='text/html'>
  <div class="panel-group">
 <div id="accordion" class="panel panel-default" data-bind="foreach: children">
      <div class="panel-heading">
        <h4 class="panel-title">
   <a data-toggle="collapse" data-parent="#accordion" data-bind="text:displayLabel, attr:{href:idhash}">Lorem</a>
  </h4>
      </div>
      <div data-bind="attr:{id:id}" class="panel-collapse collapse">
        <div class="panel-body" data-bind="foreach: children">
          <div class="panel-heading">
            <a data-bind="text:displayLabel">Donec</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>

2

jquery twitter-bootstrap twitter-bootstrap-3 knockout.js knockout-templating

Источник

user5185570 06 янв '16 в 16:36

1 ответ

Другие вопросы по тегам jquery twitter-bootstrap twitter-bootstrap-3 knockout.js knockout-templating

user5185570 06 янв '16 в 18:07 2016-01-06 18:07 · Answer 1 · 2016-01-06 18:07

Дешевое решение было бы изменить bootstrap.js и удалите '[data-toggle=collapse]',

Я все еще ищу причину этого и что происходит, поэтому мне не нужно прибегать к изменению bootstrap.js, Даже после модификации collapse вызывается дважды.

На это я пока не нашел ответа.

  // COLLAPSE DATA-API
  // =================

  $(document).on('click.bs.collapse.data-api', function (e) {
    var $this   = $(this), href
    var target  = $this.attr('data-target')
        || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
    var $target = $(target)
    var data    = $target.data('bs.collapse')
    var option  = data ? 'toggle' : $this.data()
    var parent  = $this.attr('data-parent')
    var $parent = parent && $(parent)

    console.log("A",data);
    if (!data || !data.transitioning) {console.log("B1");
      if ($parent) { console.log("B2");
          $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
      }
      console.log("B3",$target.hasClass('in'));
      $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
    }
    console.log("C", option);
    $target.collapse(option)
    console.log("D");
  })

Обновленный журнал:

bootstrap.js:622 A null
bootstrap.js:623 B1
bootstrap.js:627 B3 false
bootstrap.js:630 C Object {}
bootstrap.js:632 D
bootstrap.js:622 A null
bootstrap.js:623 B1
bootstrap.js:627 B3 false
bootstrap.js:630 C Object {keycount: 0}
bootstrap.js:632 D