Magento 2: `` Her biri /> '' etiketi nedir?

Anlayabildiğim kadarıyla, Magento'nun arka ucunda bir Izgara görüntülediğinizde, aşağıdaki "XHR üzerinden yüklendi" KnockoutJS şablonu, şeyleri oluşturmaya başlayan şeydir

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>

Ancak - <each/>Etiket ve etiketin ne olduğu konusunda biraz kaybım <render/>var. KnockoutJS stokunun bir parçası değiller (ya da görünmüyorlar mı?).

Bileşenler aracılığıyla KnockoutJS'ye özel etiketler eklemenin mümkün olduğunu biliyorum , ancak KnockoutJS adlı bir bileşenin adlandırıldığı eachveya rendereklendiği herhangi bir belirgin yer görmüyorum .

Bu yüzden, bunların farkında olmadığım bir yerde kayıtlı bileşenler veya Magento'nun KnockoutJS'de özel etiketleri etkinleştiren veya tamamen başka bir şey yaptığını bilmiyorum.

Not: Burada tamamen karanlıkta değilim - <each/>muhtemelen JSON'da oluşturulan her alt kullanıcı arabirimi bileşeni üzerinde yinelenen ve şablonunu oluşturan (bu şablon varsa).

Hiç net olmadığım şey bu etiketlerin nasıl uygulandığıdır. Verilerin nasıl bağlandığını hata ayıklayabilmeleri için nerede uygulandıklarını görmek ve Magento'nun başkaları olması durumunda bu etiketleri oluşturmak için kullandığı mekanizmayı anlayabiliyorum.

As Raphael ima, bu Magento XHR'nin yoluyla (yani ajax) isteği onun KnockoutJS şablonları indirdiğinde çıkıyor, o da rutinleri ayrıştırma bazı özel yoluyla geçtiği özel etiketleri ve öznitelikleri bir dizi görünüm

Bu özel ayrıştırma Magento_Ui/js/lib/knockout/template/rendererRequireJS modülü tarafından yapılır . Bu modülün kaynak kodu, aranacak bir dizi varsayılan etiket ve nitelik ayarlar. Bu oluşturucuya ek etiketler ve nitelikler ekleyebilecek başka modüller de vardır . Örneğin, aşağıdakiler

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

katacak olacak <scope/>etiketi ve scopeniteliğini ( <div scope="...">ayrıştırılabilir özelliklerin listesine).

Mı gibi görünüyor temel fikir bu etiketleri çevirmek ve yerli Nakavt "etiketsiz" şablon bloklar halinde bağlıyor. Örneğin, aşağıdaki Magento KnockoutJS şablonu

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

Aşağıdaki yerel KnockoutJS koduna çevirir

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

Bu çevirinin kesin kuralları benim için hala belirsiz - kod Magento_Ui/js/lib/knockout/template/rendererbiraz dolaylı ve etiketten etikete, niteliğe ve niteliğe değişebilecek gibi görünüyor.

Ben bir Magento KnockoutJS şablonu indirmek ve yerel KnockoutJS koduna çevirmek olabilir aşağıdaki kod snippet kadar ginned.

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'nun bunu neden yapabileceğine gelince - tahminim KnockoutJS'in yorum şablonu için bir tür sözdizimi vurgulama ve okunabilirlik istiyor, ancak asla Mallory-ish nedenlerini dışlamıyor .

Her iki etiket altında uygulanır app/code/Magento/Ui/view/base/web/js/lib/knockout/template/renderer.js, tam olarak nasıl olsa uygulandığını anlamak için çok emin değilim:

_.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);
    }
});