Передать шаблон как параметр в пользовательский компонент с помощью foreach. - PullRequest
Новая
       6

Передать шаблон как параметр в пользовательский компонент с помощью foreach.

0 голосов
/ 07 января 2019

У меня есть компонент, который отображает таблицу, и мне нужно определить шаблон ячейки, который будет отображаться в каждой строке. 

<my-table params="files: unprocessed">
    <cell-template>
       <span data-bind="text: name" />
    </cell-template>
</my-table>

Однако ячейка-шаблон отображается только в первом ряду. Как определить и использовать шаблон в качестве параметра, который будет отображаться внутри привязки? 

<template id="my-table-template">
    <table class="table table-striped" data-bind="visible: files().length > 0">
        <tbody data-bind="foreach: files()">
            <tr>
                <td data-bind="text: id" />
                <td>
                    <!-- ko template: { nodes: $parent.cellTemplateNodes} -->
                    <!-- /ko -->
                </td>
            </tr>
        </tbody>
    </table>
</template>

ЯШ: 

function getChildNodes(allNodes: Array<any>, tagName: string) {
    var lowerTagName = tagName.toLowerCase(),
        node = ko.utils.arrayFirst(allNodes, function (node) { return node.tagName && node.tagName.toLowerCase() === lowerTagName; }),
        children = (node ? node.childNodes : null);

    return children;
}


ko.components.register("my-table", {
    template: { element: 'my-table-template' },
    viewModel: {
        createViewModel: (params, componentInfo) => {
            var a = {
                files: params.files,
                cellTemplateNodes: getChildNodes(componentInfo.templateNodes, 'cell-template')
            };
            return a;
        }
    },
});

1 Ответ

0 голосов
/ 07 января 2019

Knockout не проверяет это, но ожидает, что узлы, переданные в привязку template, будут истинным массивом. Это потому, что первое, что он делает, это перемещает узлы в новый родительский узел. Поэтому вы должны скопировать узлы в новый массив: 

return ko.utils.arrayPushAll([], children);

В Knockout 3.4.x также есть ошибка при многократном использовании одного и того же списка узлов, хотя это может привести к другому эффекту. Смотри https://github.com/knockout/knockout/issues/2187

...