Use a knockout component without the view model .JS file?

Question

I'm trying to create a knockout component and load its template from a file like so:

function ordersViewModel(){
   //whatever
}

function equipmentViewModel(){
   //whatever
}

ko.components.register('compact-view', {
    viewModel: ordersViewModel,
    template: {require: '../views/orders/compactTable.html'},
    synchronous: true
});

var MasterModel = function(){
    this.orders = new ordersViewModel(),
    this.equipment = new equipmentViewModel();
};

var mm = new MasterModel();

And I'm getting the following error:

Failed to load resource: the server responded with a status of 404 (Not Found) https://localhost/views/orders/compactTable.html.js

It seems it is looking for the .js as detailed in the docs:

For this to work, the files files/component-like-widget.js and files/component-like-widget.html need to exist.

Isn't there a way to use a component without having to separate the viewmodel in another file?

I'm using a MasterModel to be able to call other viewmodel functions from any other viewmodel, and probably separating the ordersViewModel in another file will make things more difficult.

Answer 1

It's definetely possible to do it, you can separately specify the viewModel and the template for a component.

In your case the problem is that you are missing text! before the template path and so RequireJs tries to load it as a javascript resource.

Also, you need to include the RequireJs text plugin: https://github.com/requirejs/text

Answer 2

//Component with no viewmodel
namespace Components {

export namespace NoViewModelComponent{

    export const componentName = 'no-viewmodel-component';

   //No Viewmodel as is taken care of elsewhere
    (function register() {
        ko.components.register(componentName, {
            template: {
             //using require
              require: 'text!' + BASE_URL + 'Views/Components/NoViewModelView.html'
             //OR direct html
             //'<div > {{My Var}}</div>'
            }

        });
    })();
  }    
}