将自定义参数传递到使用 requirejs 加载为 AMD 的 Typedscript 定义的挖空组件中

Question

我构建了一个仪表板组件，该组件使用挖空组件绑定加载其他组件。使用打字稿。基本上它有效。

组件注册如下...

ko.components.register('camera-widget', {
    viewModel: { require: 'Scripts/app/Widgets/CameraWidget/ViewModels/CameraWidgetViewModel' },
    template: { require: 'text!Scripts/App/Widgets/CameraWidget/Views/CameraWidget.html' }
});

。并实例化使用组件绑定（其中 tagName = '相机小部件' 和参数 = {/* 一些初始值让组件加载其数据 */}）：

<div data-bind="component: tagName, params: parameters"></div>

在Typescript中，CameraWidgetViewModel类定义如下：

import ko = require('knockout');
import PagerSettings = require('../Models/PagerSettings');
import PagerSettingsViewModel = require('./PagerSettingsViewModel');
import CameraViewModel = require('./CameraViewModel');
class CameraWidgetViewModel implements CameraWidget.ICameraWidgetViewModel {
    constructor (data: any) {
         if (data.someValue) {
             // BOOOOM! data is undefined
         }
    }
}
export = CameraWidgetViewModel;

编译成JS的CameraWidgetViewModel类被包装在一个匿名函数中：

define(["require", "exports", 'knockout', '../Models/PagerSettings', './PagerSettingsViewModel'], function (require, exports, ko, PagerSettings, PagerSettingsViewModel) {
    var CameraWidgetViewModel = (function () {
        function CameraWidgetViewModel(data) {
        }
    });
});

如何管理要传递到该内部函数调用的组件绑定中的参数？

Answer 1

在 KNOCKOUT 关于组件绑定的文档中，您可以找到其所需的语法：

若要向组件提供参数，请传递具有以下属性的对象：

• 名称 ― 要注入的组件的名称。同样，这是可以观察到的。

• params — 将传递给组件的对象。通常，这是一个包含多个参数的键值对象，通常由组件的视图模型构造函数接收。

来源：敲除组件绑定，副标题：API，强调我的

实例化绑定的方式将参数传递到component绑定之外。它们应位于 params 属性后面的对象中。您必须使用此标记：

data-bind="component: { name: tagName, params: parameters }"

Answer 2

您没有从 CameraWidgetViewModel 文件中导出任何内容，因此实际上没有定义任何内容。但我也不认为你应该导出一个类，因为它看起来 knockout 期望返回一个函数，而不是构造函数。

我会尝试将其添加到文件底部：

function getViewModel(...args) {
  return new CameraWidgetViewModel(...args);
}
export = getViewModel;