Question

I’ve checked out a number of samples, but none are quite the same as what I’m trying to do.

What I’ve got works, mostly, but it doesn’t quite work right.

Here’s a fiddle to illustrate the issue.

http://jsfiddle.net/5yA6G/4/

Notice that the top set works fine, but it’s statically defined.

The bottom set (Tom, steve, bob) “work” basically, but the header element ends up both in the collapsible header AND in the portion of the collapsible that gets hidden.

Seems like I must be doing something wrong, but I haven’t been able to figure out what.

Any ideas?

Answer 1

I actually found a much easier way to do this:

1. Set up your foreach binding as you normally would for me it looked like this

   <div data-bind="foreach: promotions">
   
       <h3 data-bind="text: Title"></h3>
           <p>Creator:<span data-bind="text: Creator"></span></p> 
           <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
           <span data-bind="text: Description"></span>
           <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>
   

2. Wrap that in a div with class=”collapsible like so

   <div data-role="collapsible-set" data-bind="foreach: promotions">
   
   <div class="collapsible">
       <h3 data-bind="text: Title"></h3>
           <p>Creator:<span data-bind="text: Creator"></span></p> 
           <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
           <span data-bind="text: Description"></span>
           <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>
   

3. Apply the collapsible widget via jquery mobile after you do your binding like so:

   $(document).ready(function () {
       ko.mapping.fromJS(data, dataMappingOptions, PromotionViewModel.promotions);
       ko.applyBindings(PromotionViewModel);
       $('.collapsible').collapsible();
   });
   

4. For a collapsible set the same idea can be applied just set the class=”collapsible-set” on your foreach div. Hope this helps