Multiple Independent View Models Interacting (Knockout) - asp.net

Question

I have a view model in a ASP.Net application set up right now to handle some data binding and it interacts with a Razor template on my main view that is shared across several pages. I have a select box in the Razor template that has a data binding on my current view model, but I would have to duplicate this code across several view models to gain the same functionality and I want to just have this part of my view model be abstracted just like my template is an abstraction of the part of the view it is on. Ideally what I want is something like the following (psuedo-code):
class ViewModel1{
function doSomeAjaxStuff(option from select){
}
function doSomethingOnSelectorChange(option from select){
call doSomeAjaxStuff(option from select);
}
}
class SelectorViewModel{
function getSelectorValuesFromAjax(){
//this function will populate the selectors values from an ajax call
}
function sendMessageThatSelectorHasChanged(){
//this will send to the first viewmodel that the selector value has changed
}
}
I am a bit new to the MVVM architecture and I'm not exactly sure how to do this with knockout. Can someone help me out?

Answer 1

I'm not sure if this is what you're asking, but it sounds like you're looking to implement something like a reusable control using Knockout. One approach we're currently taking is using custom binding handlers in conjunction with template scripts. For example, given some templates:
<script type="text/html" id="selector-template">
<!-- ko if: isLoading -->
Loading data...
<!-- /ko -->
<!-- ko ifnot: isLoading -->
<ul data-bind="foreach: items">
<li data-bind="
css: { selected: $parent.selectedItem == $data },
template: $parent.itemTemplate,
click: selectItem">
</li>
</ul>
<!-- /ko -->
</script>
...and a binding handler:
ko.bindingHandlers.selector = {
init: function(element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
var bindingValues = valuesAccessor();
var templateElem = document.createElement('div');
templateElem.setAttribute('data-bind', 'template: "selector-template"');
element.appendChild(templateElem);
var viewModelForControl = new SelectorViewModel(bindingValues);
var childBindingContext = bindingContext.createChildContext(viewModelForControl);
ko.applyBindingsToDescendants(childBindingContext, element);
return { controlsDescendantBindings: true };
}
};
...you could instantiate the custom control like this:
<div data-bind="selector: {
itemsUrl: urlForItems,
selected: doSomethingOnSelectorChange,
itemTemplate: 'product-list-item-template'
}"></div>
<script type="text/html" id="product-list-item-template">
<img data-bind="attr: { src: imageUrl }" />
<span data-bind="text: description"></span>
</script>