javascript - Can't get accordion to work properly in cshtml -
i'm following example: http://jsfiddle.net/rniemeyer/mfegm/
javascript
// using jquery-ui-1.11.4.js // , jquery-1.10.2.js // creates few tags loop through var tag = { userid: "muzzya", tagtext: "this text should collapsed in 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>
i'm not sure i'm doing wrong.
edit: calling .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 template binding) ko.utils.domnodedisposal.adddisposecallback(element, function () { $(element).accordion("destroy"); }); }, update: function (element, valueaccessor) { var options = valueaccessor() || {}; $(element).accordion("destroy").accordion(options); } } }
below how view model set up. can't change it, because there's entire system relying on it. why gets binded way see
var viewmodel = function () { var self = this; self.tags = ko.observablearray(); } document.addeventlistener("domcontentloaded", init, false); function init() { ko.applybindings(new viewmodel()); }
applybindings
can apply bindings have been defined. defining them afterward not retroactively apply them. moved additional binding handler defined before bindings applied, , removed settimeout, allowing destroys called before accordion set up.
var tag = function(tag, comments) { this.tag = ko.observable(tag); this.comments = ko.observablearray(comments); } var tag = { userid: "muzzya", tagtext: "this text should collapsed in 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 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>
Comments
Post a Comment