마 젠토 2 :`<each />`태그 란 무엇입니까?

내가 알 수 있듯이 Magento의 백엔드에서 그리드를 볼 때 다음과 같은 "XHR에로드 됨"KnockoutJS 템플릿이 렌더링을 시작합니다.

File: vendor/magento//module-ui/view/base/web/templates/collection.html
URL:  http://magento.example.xom/pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/templates/collection.html
<each args="data: elems, as: 'element'">
    <render if="hasTemplate()"/>
</each>

그러나- <each/>태그와 <render/>태그가 무엇인지 약간의 손실 이 있습니다. 그들은 KnockoutJS의 일부가 아닙니다 (또는 보이지 않는 것 같습니다).

components를 통해 KnockoutJS에 커스텀 태그를 추가하는 것이 가능하다는 것을 알고 있지만 KnockoutJS에 이름 이 추가 each되었거나 구성 요소 render가 추가 된 명확한 장소는 보이지 않습니다 .

따라서 이것이 내가 모르는 곳에 등록 된 구성 요소인지 또는 Magento가 KnockoutJS에서 사용자 정의 태그 또는 다른 것을 가능하게하는 다른 사용자 정의인지 확실하지 않습니다.

참고 : 나는 완전히 어둠에 있지는 않습니다. <each/>아마 JSON에서 렌더링 된 모든 자식 ui 구성 요소를 반복하고 해당 템플릿이있는 경우 해당 템플릿을 렌더링합니다.

전혀 명확하지 않은 것은 이러한 태그가 어떻게 구현되는지입니다. 데이터가 바인딩되는 방식을 디버깅 할 수 있도록 데이터가 구현 된 위치를 확인하고 Magento가 다른 태그가있는 경우 이러한 태그를 만드는 데 사용하는 메커니즘을 이해하고 싶습니다.

Raphael이 암시 한 것처럼 Magento는 XHR (즉, ajax) 요청을 통해 KnockoutJS 템플릿을 다운로드 할 때 여러 사용자 정의 태그 및 속성을 찾는 일부 사용자 정의 구문 분석 루틴을 통해 전달합니다.

이 사용자 정의 구문 분석은 Magento_Ui/js/lib/knockout/template/rendererRequireJS 모듈에 의해 수행됩니다 . 이 모듈의 소스 코드는 검색 할 여러 기본 태그 및 속성을 설정합니다. 이 렌더러에 추가 태그 및 속성을 추가 할 수있는 다른 모듈 도 있습니다 . 예를 들면 다음과 같습니다.

#File: vendor/magento/module-ui/view/base/web/js/lib/knockout/bindings/scope.js
renderer
    .addNode('scope')
    .addAttribute('scope', {
        name: 'ko-scope'
    });

추가 할 것이다 <scope/>태그와 scope속성 ( <div scope="...">구문 분석 속성의 목록).

가는 것 같아 기본적인 아이디어는 이러한 태그를 번역하고 기본 녹아웃 "태그가 필요없는"템플릿 블록으로 속성. 예를 들어, 다음 Magento KnockoutJS 템플릿

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

다음과 같은 고유 KnockoutJS 코드로 변환

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

이 번역의 정확한 규칙은 여전히 ​​명확하지 않습니다. 코드 Magento_Ui/js/lib/knockout/template/renderer는 약간 간접적이며 태그에서 태그, 속성에서 속성으로 변경할 수있는 것 같습니다.

Magento KnockoutJS 템플릿을 다운로드하여 네이티브 KnockoutJS 코드로 변환 할 수있는 다음 코드 스 니펫을 작성했습니다.

jQuery.get('http://magento-2-1-0.dev/static/adminhtml/Magento/backend/en_US/Magento_Ui/templates/collection.html', function(result){
    var renderer = requirejs('Magento_Ui/js/lib/knockout/template/renderer')
    var fragment = document.createDocumentFragment();
    $(fragment).append(result);

    //fragment is passed by reference, modified
    renderer.normalize(fragment);
    var string = new XMLSerializer().serializeToString(fragment);
    console.log(string);    
})

Magento가 왜 그렇게 할 수 있는지에 관해서는 KnockoutJS의 주석 템플릿에 대한 구문 강조 및 가독성을 원하지만 더 많은 Mallory-ish 이유를 배제하지는 않습니다 .

두 태그는 모두 아래 app/code/Magento/Ui/view/base/web/js/lib/knockout/template/renderer.js에 구현되어 있지만 구현 방법을 정확히 이해하지 못했습니다.

_.extend(preset.nodes, {
    foreach: {
        name: 'each'
    },

    /**
     * Custom 'render' node handler function.
     * Replaces node with knockout's 'ko template:' comment tag.
     *
     * @param {HTMLElement} node - Element to be processed.
     * @param {String} data - Data specified in 'args' attribute of a node.
     */
    render: function (node, data) {
        data = data || 'getTemplate()';
        data = renderer.wrapArgs(data);

        renderer.wrapNode(node, 'template', data);
        $(node).replaceWith(node.childNodes);
    }
});