javascript - KO Component - 在组件绑定(bind)中保留 DOM 元素

Question

我第一次尝试使用 KO 3.2 版本来设计组件。

目前，我正在尝试创建一个网格，并且确实希望向程序员公开组件将生成的结果表元素的头部和主体部分的相关标记。

这是我试图在所需的语法风格方面实现的示例:

<pht-dataGrid params="{ model: dataGridModel, 
                        header: 'data-header', 
                        lineItem: 'data-line-item', 
                        itemContent: 'data-item-content' }">

                 <script type="text/html" id="data-header">
                    <th class="AlignLeft"><h3>Column 1</h3></th>
                    <th class="AlignLeft"><h3>Column 2</h3></th>
                </script>

                <script type="text/html" id="data-line-item">
                    <td><span data-bind="text: Name"></span></td>
                    <td>Some Type</td>
                </script>
</pht-datagrid>

这种方法的问题在于，KO 在启动渲染过程时只是简单地删除了 pht-dataGrid 组件。

问题:是否有办法避免这种行为以达到我想要的效果？

Answer 1

正如您所描述的，这不受支持。您可以将脚本 block 移到组件 block 之外。

<pht-dataGrid params="{ model: dataGridModel, 
                        header: 'data-header', 
                        lineItem: 'data-line-item', 
                        itemContent: 'data-item-content' }">
</pht-datagrid>

<script type="text/html" id="data-header">
    <th class="AlignLeft"><h3>Column 1</h3></th>
    <th class="AlignLeft"><h3>Column 2</h3></th>
</script>

<script type="text/html" id="data-line-item">
    <td><span data-bind="text: Name"></span></td>
    <td>Some Type</td>
</script>

目前存在一些关于实现此目的的可能方法的未决问题:

• Request feature: runtime composition of ko 3.2 component
• Can I override component views with data-parts?