Question

We have a large nested observable array mapped though templates to create a tree view. The list is dynamic, but there are potentially 1000+ elements in the tree.

We are having performance issues loading and searching this collection – most noticeably in IE8 and iPad. Chrome seems ok.

The elements in the collection don’t actually change, so I don’t think we need the ‘notify’ aspects of the observables, but we want to take advantage of the databinding.

Is there a way to do data-binding to objects in your viewmodel which are not observable?
Is there a way to create non-observable complex data collections without using ko.mapping.fromJS()?

Answer 1

You can totally bind properties that do not change and are not observables. It seems like you just want to map a large object to another in the same way as the mapping plugin but without creating observables. Have you considered simply using JQuery.extend?

If you array is observable then make sure you follow the guidelines in this excellent post.

I’ve also heard of people getting better performance by switching from native templating to third parties like jquery.tmpl (not sure if this applied to you).

EDIT

After further clarification in the comments. The problem was that your bindings were assuming that the properties were observables. In your template you have the follow line.

 <!-- ko if: IsSectionHeader() --> 

This is executing the observable IsSectionHeader in order to get it’s value. This is fine when IsSectionHeader is an observable because observable are functions. When you switch to raw model this won’t work. I recommend using a tool such as firebug and checking the error console, it reported the error exactly.

Anyway, the fix was to remove the double brackets. Note, that the ko bindings can take observables with or without the brackets even if the property is observable so they weren’t needed anyway.

Hope this helps.