模塊化Web組件與基於視圖的數據綁定上下文

Question

我試圖讓我的代碼儘可能模塊化，並模仿WPF和Caliburn.Micro的模式。以下是我迄今爲止使用Knockout組件嘗試過的內容。

組件視圖模型

function welcomeViewModel() { 
    this.greeting = 'Hello world!; 
} 

應用視圖模型

function appViewModel() { 
    this.firstGreetingVM = new welcomeViewModel(); 
    this.secondGreetingVM = new welcomeViewModel(); 
} 

應用查看

<WelcomeWidget data-bind-to="firstGreetingVM"/> 
<WelcomeWidget data-bind-to="secondGreetingVM"/> 

如何我可以在視圖本身中定義上下文（使用什麼視圖模型）？

Answer 1

如果您正確註冊組件，則可以使用組件所需的任何視圖模型。這種方法可以讓你通過參數傳遞你的組件viewModel，或者讓它使用你的params創建一個新的視圖模型。

ko.components.register('WelcomeWidget', { 
    template: ... 
    viewModel: function (params = {}) { 
     return params.viewModel || new WelcomeWidgetViewModel(params); 
    }, 
}); 

AppViewModel

function AppViewModel() { 
    this.firstGreetingVM = new WelcomeWidgetViewModel({greeting: 'first greeting'}); 
    this.secondGreetingVM = new WelcomeWidgetViewModel({greeting: 'second greeting', someOtherProperty: 'howdy'}); 
} 

AppViewModel.html

<WelcomeWidget params="viewModel: firstGreetingVM"></WelcomeWidget> 
<WelcomeWidget params="viewModel: secondGreetingVM"></WelcomeWidget> 
<WelcomeWidget params="greeting: 'third greeting', someOtherProperty: 'blah'"></WelcomeWidget> 

WelcomeWidgetViewModel

function WelcomeWidgetViewModel(options = {}) { 
    this.greeting = options.greeting; 
    this.someOtherProperty = options.someOtherProperty; 
}