Question

在我的网络应用程序中，我有（比方说）2个标签，两个都是自定义的淘汰组件。它们的可见性由以下语法控制：

<div id="page" data-bind="component: { name: currentTab }"></div>

其中currentTab是一个带有当前标签名称的observable。

在两个标签中，我都使用自定义绑定对D3.js进行可视化。问题是打开选项卡后重新初始化这些自定义绑定。有没有办法只加载它们一次，这样它们就不需要重新绘制了？

请注意，组件的视图模型不会重新初始化，因为它们是使用{instance：new viewModel（）}技巧创建的：

define(['knockout', 'text!./tab-one.html', 'jquery'], function(ko, template, $) {

    function ViewModel() {
        var self = this;
    };

    return {
        viewModel: { instance: new ViewModel() },
        template: template
    };
});

Answer 1

您可能需要稍微改变一下方法：

<div id="page">
    <div id="tab-1" data-bind="visible: (currentTab() == 'drawing-1'), component:{name:'drawing-1'}"></div>
    <div id="tab-2" data-bind="visible: (currentTab() == 'drawing-2'), component:{name:'drawing-2'}"></div>
</div>

作为替代方案，如果您提供视图模型，则可以为组件添加更多灵活性，例如，在组件本身内部封装可见性的逻辑，此外 - 如果您最终还可以跳过组件初始化时的第一次重绘：

这只是一个例子，但你可以看到这个想法：

ko.components.register('drawing', {
    viewModel: function(params) {
        // Behaviors
        this.active1 = params.currentTab == 'drawing-1';
        this.active2 = params.currentTab == 'drawing-2';
        this.draw = ko.computed(function() {
            if (!ko.computedContext.isInitial()) {
                // do some changes to the drawing
            }
        });
    },
    template:
        '<div data-bind="visible: active1">'+
            // drawing 1
        '</div>'+
        '<div data-bind="visible: active2">'+
            // drawing 2
        '</div>'
});

在敲除组件中应用绑定一次

1 个答案: