Custom binding for jquery ui accordion

[Ω Alisson]

How can I make a custom binding for jquery ui accordion? I've tried this:

ko.bindingHandlers.jqAccordion = {

    init: function(element, valueAccessor) {

        var options = valueAccessor();

   $(element).accordion(options);

    },

    update: function(element) {

        $(element).accordion('destroy').accordion();

    }

};

But it doesn't trigger the update when data is added to the accordion div(with template)

[Steven Sanderson]

> it doesn't trigger the update when data is added to the accordion div(with template)

Sorry, I don't really follow what you're trying to do. Is the value passed to your binding supposed to represent options for initialising the according (it looks that way from your code), or is it supposed to represent some data shown inside the accordion (as your question suggests, even though there's nothing of that sort in the code)?

It looks like you're using the binding value to represent initialisation options, and so it should correctly invoke the "update" handler whenever those options change, assuming the options are an observable. Is that really what you're trying to do?

Steve

2010/12/14 Ω Alisson <thelin...@gmail.com>

[Ω Alisson]

The value represents the options When I call jqAccordion: {} inside a div, it initializes correctly, the problem is that the update function is not invoked when the div receives template data, so the accordion doesn't display correctly(it needs to be recreated).

2010/12/14 Steven Sanderson <ste...@stevensanderson.com>

[Ω Alisson]

I've achieved what I need with this:

<div id="accordion" data-bind="jqAccordion:{},template: {name: 'eventoTemplate',foreach: events,afterAdd: function(elem){$(elem).trigger('valueChanged');}}"></div>

ko.bindingHandlers.jqAccordion = {

    init: function(element, valueAccessor) {

        var options = valueAccessor();

   $(element).accordion(options);

   $(element).bind("valueChanged",function(){

      ko.bindingHandlers.jqAccordion.update(element,valueAccessor);

   });

    },

    update: function(element,valueAccessor) {

        var options = valueAccessor();

        $(element).accordion('destroy').accordion(options);

    }

};

Not so clean, but it works :)

2010/12/14 Ω Alisson <thelin...@gmail.com>

[fla...@gmail.com]

Nice one, glad you got that sorted out.

Regards
Steve

On Dec 14, 4:49 pm, Ω Alisson <thelinuxl...@gmail.com> wrote:
> I've achieved what I need with this:
>
> <div id="accordion" data-bind="jqAccordion:{},template: {name:
> 'eventoTemplate',foreach: events,afterAdd:
> function(elem){$(elem).trigger('valueChanged');}}"></div>
>
> ko.bindingHandlers.jqAccordion = {
>     init: function(element, valueAccessor) {
>         var options = valueAccessor();
>     $(element).accordion(options);
>     $(element).bind("valueChanged",function(){
>        ko.bindingHandlers.jqAccordion.update(element,valueAccessor);
>     });
>     },
>     update: function(element,valueAccessor) {
>         var options = valueAccessor();
>         $(element).accordion('destroy').accordion(options);
>     }
>
> };
>
> Not so clean, but it works :)
>

> 2010/12/14 Ω Alisson <thelinuxl...@gmail.com>

>
>
>
>
>
>
>
> > The value represents the options When I call jqAccordion: {} inside a div,
> > it initializes correctly, the problem is that the update function is not
> > invoked when the div receives template data, so the accordion doesn't
> > display correctly(it needs to be recreated).
>
> > 2010/12/14 Steven Sanderson <ste...@stevensanderson.com>
>
> > > it doesn't trigger the update when data is added to the accordion
> >> div(with template)
>
> > Sorry, I don't really follow what you're trying to do. Is the value passed
> >> to your binding supposed to represent options for initialising the according
> >> (it looks that way from your code), or is it supposed to represent some data
> >> shown inside the accordion (as your question suggests, even though there's
> >> nothing of that sort in the code)?
>
> >> It looks like you're using the binding value to represent initialisation
> >> options, and so it should correctly invoke the "update" handler whenever
> >> those options change, assuming the options are an observable. Is that really
> >> what you're trying to do?
>
> >> Steve
>

> >> 2010/12/14 Ω Alisson <thelinuxl...@gmail.com>

[aslegu...@gmail.com]

Hi!

I think I might use your solution, but being new to knockout (and query) I struggle with the understanding. My hope is you can educate me, please! :)

Regarding the 

"foreach: events" : I understand this as the array you want to loop through - typically "myArray = ko.observableArray();".    Am I right?

"name:  'eventoTemplate'": This I´m struggling with. Is  'eventoTemplate' the "Id='?' " in your <div> that you sort on?

I have a dynamic Id in my "loop":   <div data-bind="attr: {'id': 'Task' + TaskId}" class="group">

where "TaskId = ko.observable(´...set from datamodel...´);"

My accordion function uses these options, including header:   

$("#accordion")

              .accordion({

                  header: "> div > h3"

                  ,collapsible: true

                  ,active: false

                  ,heightStyle: "content"

                  ,icons: icons

                  //, event: "click hoverintent"

              }) 

What will the 'eventoTemplate'  be here?

Thanks in advanse! 

best regards,

Asle :)

[aslegu...@gmail.com]

This is my code:

<div id="accordion" data-bind="jqAccordion:{},template: {name: 'task-template',foreach: Tasks,afteradd: function(elem){$(elem).trigger('valueChanged');}}"></div> 

<script type="text/html" id="task-template">

     <div data-bind="attr: {'id': 'Task' + TaskId " class="group">

          <h3><b><span data-bind="text: TaskId"></span>: <input name="TaskName" data-bind="value: TaskName  /></b></h3>

          <p>

             <label for="Description" >Description:</label><textarea name="Description" data-bind="value: Description"></textarea>

          </p>

     </div>

</script>

Arrays and values are ok and updated, but the accordion cannot be collapsed and the collapsible-option is not working. Where do I go wrong?