I want to use the Knockout.js If
binding but include animation. I am using a single view model container to allow for a large number of separate views to be loaded into the same container. If I use the visibility
binding on the "template" the bindings are hidden and all throw errors since their view model is not currently loaded. I am fearful these view models will begin to slowdown the page if everything is loaded.
From the knockout If
documentation:
The if binding, however, physically adds or removes the contained markup in your DOM, and only applies bindings to descendants if the expression is true.
The knockout animated transitions documentation creates a custom binding using jQuery's Show/Hide functions. However, these also hide/show the DOM elements.
In short I am trying to learn one of two things.
What would be the appropriate way to remove/add DOM elements in jQuery so that it may be used in a custom binding?
Or
How does the if
binding in knockout work, so that I may reverse engineer it?
Clarifying Edit:
To clarify more how the code is setup. The admin section of the site that raised this question will contain a place to edit all of the standard content pages, and access reports for the business.
Html "templates" are stored as such (To be clear, these are not knockout templates, but rather html files that contain data-bindings. This could be changed with a compelling reason.)
Admin
Page Edit
User Edit
etc
Reports
Product
User
etc
Our javascript is similar to this
BaseViewModel.js:
Content view model
AdminEditViewModels.js:
UserEditViewModel
ContentEditViewModel
[1 view model per item]
AdminReportsViewModels.js
[similar to above]
When a link is clicked the main page content view model is loaded into the Base view model and is made visible by the binding that inspired this question. Then each view model has it's own Load to trigger the ajax calls.
self.ViewOrders = function () {
self.Content("Orders");
self.ContentVM(new AdminOrdersViewModel());
self.ContentVM().Load();
}
Right now there are only about 9 different "templates" and we have normalized them the best we can, but it is likely they will grow. The binding would just prevent each "template" from throwing errors into the console.