Webpack 创建敲除组件时运行外部函数

我正在尝试在淘汰中创建新组件：

ko.components.register("categories", {
    viewModel: {
        instance: MY_VIEW_MODEL
    },
    template: require('html-loader?interpolate!./components/categories.html')
});

以及categories.HTML中的my HTML块：

<div class="panel" data-bind="foreach: categories, afterRender: ${require('../effects.js').fadePanels()}"></div>

function fadePanels() {
    $('.panel').velocity('fadeInPanels', {
        stagger: 250,
    })
}

    test: /\.html$/,
    loader: 'html-loader',
    options: {
        interpolate: true
    },
    exclude: /node_modules/

pluswebpack.config.js：

<div class="panel" data-bind="foreach: categories, afterRender: ${require('../effects.js').fadePanels()}"></div>

function fadePanels() {
    $('.panel').velocity('fadeInPanels', {
        stagger: 250,
    })
}

    test: /\.html$/,
    loader: 'html-loader',
    options: {
        interpolate: true
    },
    exclude: /node_modules/

但它根本不起作用。以下是浏览器的输出（控制台中无错误）：

---

你有这方面的经验吗？您知道如何正确处理该问题吗？

您可以使用

createViewmodel

factory方法运行一个函数，该函数接受组件的元素。此函数接收包含当前

元素的info对象


ko.components.register（“类别”{
视图模型：{
createViewModel：（参数，信息）=>{
fadeIn（信息元素）；
返回{label:“hello world”}
} 
},
模板：``
});
const categories=ko.observearray（[“”，“”，“”]）；
const addCat=（）=>categories.push（“”）；
ko.applyBindings（{categories，addCat}）；
功能fadeIn（el）{
el.classList.add（“透明”）；
设置超时(
（）=>el.classList.add（“fadeIn”），
200
);
}
。请参阅{
不透明度：0；
过渡：不透明度。25秒缓进缓出；
}
法丹先生{
不透明度：1；
}




添加
太好了！但是，如果我已经有了一个视图模型，其中包含了所有类别（因此我将属性实例放在同一个模型中），并且我只想用一些视觉效果来显示它们，该怎么办？我是否仍应使用“createViewModel（..）”函数？假设我在视图模型中已经有了类似的东西：categories=ko.observableArray（[newcategory（“categority 1”）、newcategority（“categority 2”）），我只想在HTML中将类别的名称显示为无序列表。