Magento 2 Nakavt JS Ciltlerini Nasıl Uygular?

KnockoutJS belgelerinin çok iyi bir okumaya göre, çok basit bir Nakavt görünümünün başlatılması aşağıdaki gibi görünür

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

ie - nesne oluşturucu olarak kullanılması amaçlanan bir javascript işlevi oluşturursunuz, nesneyi ondan başlatır ve sonra bu nesneyi ko.applyBindingsglobal knockout nesnesinin ( ko) yöntemine geçirirsiniz.

Ancak, Magento 2'de, Grid UI ile bir arka uç sayfası js/core/app.jsyüklerseniz Magento, RequireJS modülünü başlatır

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    './renderer/types',
    './renderer/layout',
    'Magento_Ui/js/lib/ko/initialize'
], function (types, layout) {
    'use strict';

    return function (data) {
        types.set(data.types);
        layout(data.components);
    };
});

Bu modül, Magento'nun KnockoutJS kullanımını başlattığı anlaşılanMagento_Ui/js/lib/ko/initialize modülü yükler . Ancak, başlatma modülünün kaynağına bakarsanız.

define([
    'ko',
    './template/engine',
    'knockoutjs/knockout-repeat',
    'knockoutjs/knockout-fast-foreach',
    'knockoutjs/knockout-es5',
    './bind/scope',
    './bind/staticChecked',
    './bind/datepicker',
    './bind/outer_click',
    './bind/keyboard',
    './bind/optgroup',
    './bind/fadeVisible',
    './bind/mage-init',
    './bind/after-render',
    './bind/i18n',
    './bind/collapsible',
    './bind/autoselect',
    './extender/observable_array',
    './extender/bound-nodes'
], function (ko, templateEngine) {
    'use strict';

    ko.setTemplateEngine(templateEngine);
    ko.applyBindings();
});

Magento'nun ko.applyBindings();nesneyi görünüm nesnesi olmadan çağırdığını görürsünüz . Bu hiç mantıklı değil ve bu benim Nakavt ya da Magento'nun sınırlı anlayışımın burada özel / garip bir şey yapmasından emin değilim.

Magento'nun Nakavt ciltlerini gerçekten uyguladığı yer burası mı? Yoksa başka bir yerde mi oluyor? Yoksa Magento, Nakavt kodunu kesmek ve başka bir yerde işlemek için zor bir şey mi yapıyor?

Magento_Ui/js/lib/ko/initializeMagento onun Nakavt örneğini başlatır nerede kütüphane, gerçekten de vardır. Magento , bağlayıcılar uyguladığında bir ViewModel atamaz.

Burada eksik anahtar, adlandırılan özel KnockoutJS bağlamasıdırscope .

Magento'nun Nakavt örneği scope:böyle bir bağla karşılaştığında

<li class="greet welcome" data-bind="scope: 'customer'">
    <span data-bind="text: customer().fullname ? $t('Welcome, %1!').replace('%1', customer().fullname) : 'Default welcome msg!'"></span>
</li>

Bu bağlamanın (adlı customer) değerini alır ve içindeki iç düğümler için bir ViewModel yüklemek ve uygulamak için bunu kullanır uiRegistry. Bazı basit KnockoutJS prehata ayıklama ile belirli bir kapsam için bağlı verilerde hata ayıklayabilirsiniz

<div data-bind="scope: 'someScope'">
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>            
</div>

uiRegistryUygulanan nesne gibi basit bir sözlük, bir Magento_Ui/js/lib/registry/registryRequireJS modülü.

vendor/magento/module-ui/view/base/requirejs-config.js
17:            uiRegistry:     'Magento_Ui/js/lib/registry/registry',

Nesneler, javascript bitlerine benzer şekilde kayıt defterine konur.

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer",
                    "extra_data_1":"some_value",
                    "more_extra":"some_other_value",
                }
            }
        }
    }
}
</script>

Magento_Ui/js/core/appModüldeki program componentsiletilen nesnenin anahtarını inceler ve her bir alt nesne için

1. Belirtilen RequireJSmodül tarafından döndürülen nesneyi componentanahtardan getir ( Magento_Customer/js/view/customer)

2. Yeni bir javascript nesnesi başlatmak için bu nesneyi kullanın (aşağıya bakın)

3. Aynı nesneye fazladan veri anahtarları atayın

4. Aynı nesneyi uiRegistryorijinal nesnenin anahtarıyla ekleyin ( customeryukarıda)

x-magento-initSenaryonun nasıl çalıştığından emin değilseniz , buraya bir makale yazdım .

Bu cevaptaapp.js sürecin daha derinlemesine bir incelemesi var .

Kapsam bağlamanın uygulanması burada tanımlanmıştır

vendor/magento//module-ui/view/base/web/js/lib/ko/bind/scope.js