How do I align the height set of DOM elements after rendering the template using knockout data binding?
I am currently using twitter bootstrap with knockout and I am trying to resize a set of elements in the DOM renderer after the template has been rendered using a foreach loop on an array returned from a computed observable. I first ran into a problem using the afterRender event, but I was unable to get this function to make the necessary changes.
I have a static case of what I am trying to achieve, so I would really like to help using the foreach binding to dynamically adjust the height after rendering the computed observable.
Here is the fiddle of a static case. http://jsfiddle.net/lset/rr3ja/1/
Notice the request below that changes the height of .caption1 elements.
source to share
Obviously, you cannot use the afterRender event as it will be called after every single element, but you need to set the dimensions after all the elements have been rendered. One way to do this is to have some kind of property on the last element so that you can indicate in the afterRender event that it is the last element (or you could just compare it to the last element in the list). Then you can use this test to force all elements to resize. I used to just compare the index of the last element, because in general I usually add the index property to all observable arrays.
source to share