javascript - 无法让 Accordion 在 cshtml 中正常工作

Question

我正在遵循这个示例:http://jsfiddle.net/rniemeyer/mfegm/

JavaScript

// Using jquery-ui-1.11.4.js
// and   jquery-1.10.2.js
// Creates a few tags to loop through
var tag = {
    UserId: "MuzzyA",
    TagText: "This text should be collapsed in an accordion"
};
self.tags.push(new Tag(tag, null));
self.tags.push(new Tag(tag, null));
self.tags.push(new Tag(tag, null));

var Tag = function(tag, comments) {
    this.tag = ko.observable(tag);
    this.comments = ko.observableArray(comments);
}

CSHTML

<div class="panel-body" data-bind="foreach:tags,accordion: {}">
    <h4>
            <a href="#" data-bind="text: tag().UserId"></a>
    </h4>
    <div>
        // Content here
    </div>
</div>

我从中得到的结果只是一个列表，没有 Accordion

我不确定我做错了什么。

编辑:调用 .accordion

function init() {
ko.applyBindings(new ViewModel());

ko.bindingHandlers.accordion = {
    init: function (element, valueAccessor) {
        var options = valueAccessor() || {};
        setTimeout(function () {
            $(element).accordion(options);
        }, 0);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).accordion("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).accordion("destroy").accordion(options);
    }
}
}

下面是我的 View 模型的设置方式。我无法真正改变它，因为整个系统都依赖它。这就是为什么它会以您所看到的方式绑定(bind)

var ViewModel = function () {
var self = this;
self.tags = ko.observableArray();
}

document.addEventListener("DOMContentLoaded", init, false);

function init() {
  ko.applyBindings(new ViewModel());

}

Answer 1

applyBindings 只能应用已定义的绑定(bind)。之后定义它们不会追溯应用它们。我在应用绑定(bind)之前移动了要定义的附加绑定(bind)处理程序，并且删除了 setTimeout，这允许在设置 Accordion 之前调用销毁。

var Tag = function(tag, comments) {
  this.tag = ko.observable(tag);
  this.comments = ko.observableArray(comments);
}

var tag = {
  UserId: "MuzzyA",
  TagText: "This text should be collapsed in an accordion"
};

var ViewModel = function() {
  var self = this;
  self.tags = ko.observableArray();
  self.tags.push(new Tag(tag, null));
  self.tags.push(new Tag(tag, null));
  self.tags.push(new Tag(tag, null));
}

document.addEventListener("DOMContentLoaded", init, false);


function init() {
  ko.bindingHandlers.accordion = {
    init: function(element, valueAccessor) {
      var options = valueAccessor() || {};
      $(element).accordion(options);

      //handle disposal (if KO removes by the template binding)
      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).accordion("destroy");
      });
    },
    update: function(element, valueAccessor) {
      var options = valueAccessor() || {};
      $(element).accordion("destroy").accordion(options);
    }
  }
  ko.applyBindings(new ViewModel());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="panel-body" data-bind="foreach:tags,accordion: {}">
  <h4>
            <a href="#" data-bind="text: tag().UserId"></a>
    </h4>
  <div>
    // Content here
  </div>
</div>