Custom binding for jquery ui accordion

Showing 1-7 of 7 messages
Custom binding for jquery ui accordion thelinuxlich 12/14/10 7:58 AM
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)
Re: Custom binding for jquery ui accordion Steven Sanderson 12/14/10 8:31 AM
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>

Re: Custom binding for jquery ui accordion thelinuxlich 12/14/10 8:36 AM
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>

Re: Custom binding for jquery ui accordion thelinuxlich 12/14/10 8:49 AM
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>

Re: Custom binding for jquery ui accordion Steve Sanderson 12/19/10 7:35 AM
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>
Re: Custom binding for jquery ui accordion aslegu...@gmail.com 9/12/13 3:38 AM
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 :)




kl. 17:49:50 UTC+1 tirsdag 14. desember 2010 skrev thelinuxlich følgende:
Re: Custom binding for jquery ui accordion aslegu...@gmail.com 9/12/13 6:01 AM
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?




kl. 12:38:51 UTC+2 torsdag 12. september 2013 skrev aslegu...@gmail.com følgende: