Magento 2:在UI组件中填充“元素”的内容


9

列出UI组件的顶级KnockoutJS模板如下所示

<!-- File: vendor/magento//module-ui/view/base/web/templates/collection.html -->

<each args="data: elems, as: 'element'">
    <render if="hasTemplate()"/>
</each>

Magento将其翻译为以下原始KnockoutJS代码。

<!-- ko foreach: {data: elems, as: 'element'} -->
    <!-- ko if: hasTemplate() --><!-- ko template: getTemplate() --><!-- /ko --><!-- /ko -->
<!-- /ko -->

无论哪种情况,此模板都将foreach覆盖视图模型的elems属性。

如果我查看RequireJS模块(我认为>),它返回视图模型的构造函数类

vendor/magento/module-ui/view/base/web/js/lib/core/collection.js

我看到该insertChild方法似乎添加到elems属性。

我不太清楚的是:Magento实际在何处调用insertChild以填充elems和/或如何elems填充构成UI组件集合的视图模型?


Answers:


2

我能找到的唯一信息是

registry.get(component.parentName).insertChild(component, val.value);

在第321行

vendor/magento/module-ui/view/base/web/js/core/renderer/layout.js

看来这是在合并组件的函数内部?

merge: function (components) {
   ...
}

在用于合并节点的同一文件(layout.js)的第73行(运行功能)上使用此文件。

function run(nodes, parent, cached, merge) {
    if (_.isBoolean(merge) && merge) {
        layout.merge(nodes);

        return false;
    }

    if (cached) {
        cachedConfig[_.keys(nodes)[0]] = JSON.parse(JSON.stringify(nodes));
    }

    _.each(nodes || [], layout.iterator.bind(layout, parent));
}

此运行函数用于2个函数(process和merge-都在中layout.js),但我无法完全弄清楚它们的作用。

更新资料

我刚刚在开发文档中看到了以下内容-http: //devdocs.magento.com/guides/v2.1/ui_comp_guide/concepts/ui_comp_uicollection_concept.html

elems是可观察的属性,其中包含子UI组件的集合。

elems是uiCollection的子元素的集合。至于elems是observable属性,在运行时添加到elems的组件模板也将呈现

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.