KnockoutJS Computed + Bootstrap Scrollspy?

[benr...@hotmail.com]

Hi all,

 

I'm trying to integrate scrollspy (from Twitter bootstrap) with a list of elements I generate into the DOM based off of a computed variable exposed in my model. In my HTML, I use a simple foreach to spit out a series of divs, and assign each an ID based on a property on the binding object:

 

<div data-bind="foreach: VariableBackedByComputed">

<div data-bind="attr: {id: 'divid.' + uid}">

...

</div>

</div>

 

So that works fine, I get a series of divs, each with a unique ID. So, next step is to integrate scrollspy:

 

http://twitter.github.com/bootstrap/javascript.html#scrollspy

 

I can't simply use the declarative method described in the above link, because the DOM elements are not all present when the dom is first parsed. So, I can call $('#Element').scrollspy() once the elements are in the dom. And, I can call $('#Element').scrollspy('refresh') if I add/remove any elements to/from the DOM. I thought that I could just use a bindinghandler, but I'm not sure about this. Has anyone got this working, or does anyone have any suggestions of when and how to call .scrollspy and .scrollspy('refresh')?

 

Thanks...

 

-Ben

 

[benr...@hotmail.com]

One other piece of info I just discovered: I set up a binding handler, and set a breakpoint in the update method. When I look at the sending element variable, I see in the InnerHTML that it correctly set the id attribute, but the actual ID property is blank!

 

id=""

innerhtml="<div id="divid.2165488" data-bind="attr: {id: divid.' + uid}">....."

 

At the same time, when I do $(#divid.2165488'), it returns 0 results.  Am I not using the correct technique to set the id?

 

Thanks...

 

-Ben

[John Rayner]

InnerHtml shows you child elements, not the HTML for the element itself.  So it looks like you can pick up the ID from the first child of your element.

You prob need to be careful using periods ... jQuery is most likely interpreting it as a class selector.  Personally I'd recommend a hyphen or underscore to avoid the confusion.

Cheers,

John