Question

基于nice tutorial我已经使用Google风格的微调器创建了一个叠加层。在我的情况下，HTML是最小的，如下所示：

        <div class="spinner-wrapper" data-bind="visible: spinnerVisible">
            <svg class="spinner" viewBox="25 25 50 50">
                <circle cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10" />
            </svg>
        </div>

请注意data-bind="visible: spinnerVisible"。

我想在我的应用程序中的不同位置重用它以避免干燥问题。我可以采取什么方法？请记住，微调器包装器的可见性将由不同的视图模型控制（尽管我可以保证每个视图模型具有spinnerVisible属性）。

Answer 1

我将(template-only) knockout component与新的web component-like syntax一起使用。

让它发挥作用的两个步骤：

1。注册组件并定义其模板参数：

在这里，您可以定义模板及其渲染所需的参数。在您的情况下，只有一个命名的observable控制可见绑定。

ko.components.register('spinner', {
    template:
        '<div data-bind="visible: spinnerVisible">A spinner<hr/></div>'
});

2。将它与HTML

中的正确参数一起使用

现在，无论您的viewmodel的spinner控件属性是什么，您都可以重用相同的组件来呈现它。例如：

<spinner params="spinnerVisible: loading"></spinner>
<spinner params="spinnerVisible: pendingRequests().length > 0"></spinner>

请注意，如果您使用常规component绑定，则会丢失一些干净的语法。

以下是显示上述代码的示例：

ko.components.register('spinner', {
    template:
        '<div data-bind="visible: visible">A spinner<hr/></div>'
});

ko.applyBindings({

  someProp: ko.observable(true)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<p>Regular syntax</p>
<div data-bind="component: {
  name: 'spinner',
  params: { visible: someProp }
}"></div>

<p>Web component</p>
<spinner params='visible: someProp'></spinner>

<button data-bind="click: someProp.bind(null, !someProp())">toggle</button>

重用一段HTML +淘汰赛

1 个答案:

1。注册组件并定义其模板参数：

2。将它与HTML