javascript - 具有基于 View 的数据绑定(bind)上下文的模块化 Web 组件

Question

我试图使我的代码尽可能模块化并模仿 WPF 和 Caliburn.Micro 的模式。以下是我迄今为止使用 Knockout 组件尝试过的内容。

组件 View 模型

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

应用 View 模型

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

应用 View

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

如何在 View 本身中定义上下文(使用什么 View 模型)？

Answer 1

如果您适本地注册了一个组件，您可以使用任何您想要的 View 模型。这种方法可以让您在参数中将 viewModel 传递给您的组件，或者让它使用您的参数创建一个新的 View 模型。

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>

欢迎WidgetViewModel

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