Organizing web MVVM file content and structure

After considering this for quite some time, I was wondering what you guys thought about it or whether there might already be a known pattern to be used in such cases.

Let's just say for the sake of argument that I'm using C# MVC with Kendo UI (or JQuery).

As I see it, the client code is made up of 3 parts:

1. markup - HTML.
2. declarative JavaScript - Kendo UI/JQuery controls.
3. view model - the MVVM model.

I think these parts should be separated as follows:

I want the view models to interact with each other so I would declare all view models in separate js files and load them upfront.

The declarative javascript is useless without its markup so it should either be put it in the same html file or separated in another js file, to be loaded at the end of the markup (or by using the document ready event).

So at the end of the day I'd have:

product.html

    <ul id="example">
       <li><label>Product Name</label><input type="text"></li>
       <li><label>Product Size</label><input id="product-size" data-bind="value:selectedSize></li>
    </ul>
<script src="product.js"></script>

product.js

kendo.bind($("#example"), viewModel);

$("#color").kendoDropDownList({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: data,
                        index: 0,
                        change: onChange
                    });

product.model.js

var viewModel = kendo.observable({
        selectedSize: null,
};