使用沒有視圖模型.JS文件的組合組件？

Question

我正在嘗試創建一個基因剔除組件並從一個文件中加載其模板，如下所示：

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();

我收到以下錯誤：

無法加載資源：服務器的響應狀態為404（未找到） https：//localhost/views/orders/compactTable.html.js

似乎它正在尋找文檔中詳細說明的.js：

為了files/component-like-widget.html需要存在文件files/component-like-widget.js和files/component-like-widget.html 。

有沒有一種方法可以使用組件而不必將視圖模型分開在另一個文件中？

我正在使用ordersViewModel能夠從任何其他ViewModel調用其他ViewModel函數，並且可能將ordersViewModel分離到另一個文件中會使事情變得更加困難。

Answer 1

絕對可以做到這一點，您可以分別指定組件的viewModel和模板。

就您而言，問題在於您缺少text! 模板路徑之前，因此RequireJs嘗試將其加載為javascript資源。

另外，您需要包括RequireJs文本插件： 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>'
            }

        });
    })();
  }    
}