javascript - 重用一段 HTML + knockout

Question

基于nice tutorial我用谷歌风格的微调器创建了一个叠加层。在我的例子中，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"。

我想在我的应用程序的不同地方重用它以避免 DRY 问题。我可以采取什么方法？请记住，微调器包装器的可见性将由不同的 View 模型控制(尽管我可以保证每个 View 模型都具有 spinnerVisible 属性)。

Answer 1

我会使用 (template-only) knockout component与新 web component-like syntax .

让它工作的两个步骤:

1。注册一个组件并定义它的模板参数:

在这里，您可以定义模板及其需要呈现的参数。在您的情况下，只有一个命名的可观察对象控制可见绑定(bind)。

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

2。在您的 HTML 中使用正确的参数

现在，无论您的 View 模型的微调器控制属性是什么，您都可以重复使用相同的组件来呈现它。例如:

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

请注意，如果您使用常规的 component 绑定(bind)，您将失去一些干净的语法。

这是一个显示上述代码的示例:

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>