挖空组件 - 自定义组件加载器
Knockout Components - Custom Component Loaders
我正在使用 Knockout 组件并使用 System.js 进行模块加载。
我有一个自定义组件加载器:
var myComponentLoader = {
loadComponent: function(name, componentConfig, callback) {
System.import(componentConfig.myLoader)
.then(function(loadedComponent) {
var result = {
template: ko.utils.parseHtmlFragment(loadedComponent.componentTemplate),
createViewModel: loadedComponent.MyComponentViewModel
}
callback(result);
})
// .catch(function(myError){
// alert(myError);
// callback(null);
// });
}
};
// Register it
ko.components.loaders.unshift(myComponentLoader);
ko.components.register('my-component', { myLoader: './app/components/components' });
但是失败并显示以下消息:
TypeError: undefined is not a function {stack: (...), message: "undefined is not a function"}
这是我的 result.template 的样子:
<div>This is my component template</div>
<div data-bind="text: myName"></div>
这是我的 result.createViewModel 的样子:
function MyComponentViewModel(params) {
// Set up properties, etc.
this.myName = ko.observable("Amy Smith");
this.doSomething(params);
this.boundAt = ko.observable(moment().format());
}
这是完整的错误:
Potentially unhandled rejection [1] TypeError: undefined is not a function
at Object.ko.utils.cloneNodes (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:270:48)
at cloneTemplateIntoElement (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3644:41)
at null.callback (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3621:21)
at Function.ko_subscribable_fn.notifySubscribers (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:1103:38)
at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3151:54
at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3169:21
at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3198:29
at eval (http://localhost:8081/app/components/components-bootstrapper.js!eval:32:13)
at O (http://localhost:8081/lib/es6-module-loader.js:7:7439)
at K (http://localhost:8081/lib/es6-module-loader.js:7:7071)
要提供您的自定义配置处理逻辑,您需要按照 documentation.
中所述实施 loadComponent
方法
但是,您需要注意 return 从中获取的内容,因为根据文档:
template
属性 必须包含一个 DOM 节点数组:所以如果你的加载器加载一个您需要首先解析的字符串:
template: ko.utils.parseHtmlFragment(loadedComponent.componentTemplate)
createViewModel
必须包含一个 工厂函数 ,所以不能直接包含你的视图模型构造函数。所以你需要用
包裹它
createViewModel: function (params, componentInfo) { return new loadedComponent.viewModel(params, componentInfo); }
我正在使用 Knockout 组件并使用 System.js 进行模块加载。
我有一个自定义组件加载器:
var myComponentLoader = {
loadComponent: function(name, componentConfig, callback) {
System.import(componentConfig.myLoader)
.then(function(loadedComponent) {
var result = {
template: ko.utils.parseHtmlFragment(loadedComponent.componentTemplate),
createViewModel: loadedComponent.MyComponentViewModel
}
callback(result);
})
// .catch(function(myError){
// alert(myError);
// callback(null);
// });
}
};
// Register it
ko.components.loaders.unshift(myComponentLoader);
ko.components.register('my-component', { myLoader: './app/components/components' });
但是失败并显示以下消息:
TypeError: undefined is not a function {stack: (...), message: "undefined is not a function"}
这是我的 result.template 的样子:
<div>This is my component template</div>
<div data-bind="text: myName"></div>
这是我的 result.createViewModel 的样子:
function MyComponentViewModel(params) {
// Set up properties, etc.
this.myName = ko.observable("Amy Smith");
this.doSomething(params);
this.boundAt = ko.observable(moment().format());
}
这是完整的错误:
Potentially unhandled rejection [1] TypeError: undefined is not a function
at Object.ko.utils.cloneNodes (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:270:48)
at cloneTemplateIntoElement (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3644:41)
at null.callback (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3621:21)
at Function.ko_subscribable_fn.notifySubscribers (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:1103:38)
at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3151:54
at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3169:21
at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3198:29
at eval (http://localhost:8081/app/components/components-bootstrapper.js!eval:32:13)
at O (http://localhost:8081/lib/es6-module-loader.js:7:7439)
at K (http://localhost:8081/lib/es6-module-loader.js:7:7071)
要提供您的自定义配置处理逻辑,您需要按照 documentation.
中所述实施loadComponent
方法
但是,您需要注意 return 从中获取的内容,因为根据文档:
template
属性 必须包含一个 DOM 节点数组:所以如果你的加载器加载一个您需要首先解析的字符串:template: ko.utils.parseHtmlFragment(loadedComponent.componentTemplate)
createViewModel
必须包含一个 工厂函数 ,所以不能直接包含你的视图模型构造函数。所以你需要用createViewModel: function (params, componentInfo) { return new loadedComponent.viewModel(params, componentInfo); }