CODEWITHSUNDEEP
jqueryknockout.jstabs
Asle G
Asle G

Reputation: 588

How to get tabs working in a knockout div-structure

I have a view card that I flip. On the flip side is a jQuery Tabs UI. The view card is shown on selection from an accordion. See http://jsfiddle.net/B5TtB/6/

  1. Select a line from the accordion. - This works
  2. Flip the card - This works
  3. Select a tab different from "A" - This doesn´t work.

I guess it has to do with the with binding

<div data-bind="with: SelectedText">

but haven´t been able to identify the bug.

Thanx in advance!

Upvotes: 0

Views: 88

Answers (1)

Hans Roerdinkholder
Hans Roerdinkholder

Reputation: 3000

The problem was indeed the with-binding!

The implication of the binding was that everything inside it isn't added to the DOM until SelectedText had a value. However, you applied the tabs()-functionality immediatly when the page is loaded. So element with ID tabs did not yet exist.

What I did is create an EXTREMELY simple/minimal custom binding, for illustrative purposes. This binding applies the tabs-functionality to the element. I used the binding on your element with id tabs. This binding is applied once the element is actually added to the DOM, and now it works.

Fiddle: http://jsfiddle.net/B5TtB/7/

Just to add: in my humble opinion, it is best practise to avoid using any jQuery alongside Knockout, except when using custom bindings. If you limit your jQuery to custom bindings, you can avoid problems like this one, and many others. And additionally, your code will be cleaner and more testable. I've never once run into a problem where I needed jQuery and couldn't solve it through a custom binding. And I've used both libraries extensively!

Upvotes: 1

Related Questions