1

我目前正在开发一个使用淘汰赛作为基础的布局引擎，但我遇到了一些障碍。（对不起，很长的帖子）

我正在使用淘汰赛 3.5.1。

我有以下 index.html：

<body>
    <toolbar-dock ui-name="toolbar"></toolbar-dock>
    <general-layout ui-name="main" params="resize: true">
        <!-- this one is transparent, and overlays ontop of the main screen. -->
        <general-dock ui-name="ui" params="resize: 'fit'" id="hud_overlay"></general-dock>
    </general-layout>
    <main-statusbar></main-statusbar>
</body>

general-dock 有以下 .html：

<horizontal-dock>
    <vertical-dock ui-name="left"></vertical-dock>
    <vertical-dock ui-name="middle">
        <horizontal-dock ui-name="top"></horizontal-dock>
            <content-dock ui-name="middle">
            </content-dock>
        <horizontal-dock ui-name="bottom"></horizontal-dock>
    </vertical-dock>
    <vertical-dock ui-name="right" ></vertical-dock>
</horizontal-dock>

UIManager.registerDockType 函数使用以下参数注册一个带有敲除的扩展坞：

  • ComponentName：第一个参数是自定义元素的名称，用来注册knockout。
  • DockClass：第二个参数被实例化并传递给元素。
  • TemplateString：第三个参数是提供给敲除类的模板字符串。

有效的功能是这样的：

ko.components.register(ComponentName, {
        template: TemplateString,
        viewModel: {
            createViewModel: (params, componentInfo) => {
                if (!componentInfo) {
                    throw new Error("Component didn't initialise correctly.");
                }
                var context = ko.contextFor(componentInfo.element);
                new DockClass(componentInfo.element);
                return context.$data;
            }
        }
    })

并且是这样调用的：

UIManager.registerDockType("vertical-dock", VerticalDock, "<!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->");
UIManager.registerDockType("horizontal-dock", HorizontalDock, "<!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->");
UIManager.registerDockType("content-dock", CenterDock, "<!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->");

我希望输出以下 HTML：

<body>
    <toolbar-dock ui-name="toolbar"></toolbar-dock>
    <general-layout ui-name="main" params="resize: true">
        <horizontal-dock>
            <vertical-dock ui-name="left"></vertical-dock>
            <vertical-dock ui-name="middle">
                <horizontal-dock ui-name="top"></horizontal-dock>
                    <content-dock ui-name="middle">
                        <!-- There should be an error, blank entry or infinite duplication at this point because $componentTemplateNodes is now exhausted? -->
                    </content-dock>
                <horizontal-dock ui-name="bottom"></horizontal-dock>
            </vertical-dock>
            <vertical-dock ui-name="right" ></vertical-dock>
        </horizontal-dock>
    </general-layout>
    <main-statusbar></main-statusbar>
</body>

但我得到的是：

<body>
    <toolbar-dock ui-name="toolbar"></toolbar-dock>
    <general-layout ui-name="main" params="resize: true">
        <horizontal-dock>
            <!-- ko template: { nodes: $componentTemplateNodes } -->
                <!-- this one is transparent, and overlays ontop of the main screen. -->
                <general-dock ui-name="ui" params="resize: 'fit'" id="hud_overlay"></general-dock>
            <!-- /ko -->
        </horizontal-dock>
    </general-layout>
    <main-statusbar></main-statusbar>
</body>

为什么会这样？为什么在水平码头中我得到了通用布局的 $componentTemplateNodes？

当我使用淘汰赛 3.4.0 并<!-- ko template使用淘汰赛检查器突出显示节点时，它显示了我期望的 $componentTemplateNodes，但是 DOM 实际上具有父级的 $componentTemplateNodes。升级到 3.5.0 淘汰检查器后，DOM 显示相同的内容（尽管不是我所期望的）。

我所期望的是（与 $data 一样）如果该模板节点有子节点，则每次输入一个剔除控制模板节点时都会创建一个新的 $componentTemplateNodes。并且当递归 dom 时，每个满足该条件的子节点都会用它自己的 $componentTemplateNodes 替换当前的 $componentTemplateNodes。

这意味着 $componentTemplateNodesgeneral-dock将是：

        <!-- this one is transparent, and overlays ontop of the main screen. -->
        <general-dock ui-name="ui" params="resize: 'fit'" id="hud_overlay"></general-dock>

但是一旦我们到达horizontal-dock当淘汰赛扩展通用码头时，它将创建一个新的 $componentTemplateNodes 值（因为它有孩子），其中包含以下表示：

    <vertical-dock ui-name="left"></vertical-dock>
    <vertical-dock ui-name="middle">
        <horizontal-dock ui-name="top"></horizontal-dock>
            <content-dock ui-name="middle">
            </content-dock>
        <horizontal-dock ui-name="bottom"></horizontal-dock>
    </vertical-dock>
    <vertical-dock ui-name="right" ></vertical-dock>

我预计返回原始 $componentTemplateNodes 的唯一方法是递归 $parentContext 或将它们作为参数传递。

这是一个错误还是我在做一些愚蠢的事情？

4

0 回答 0