riotjs按名称访问子标签

Question

我认为this.name是访问自定义标记的方式。但是这是未定义的，this.tags只包含页面上6-8个自定义标签中的2个。

<eservices-mma-receive-inventory-scan>
<style scoped>
    :scope {
        position: relative;
        display: block;
    }

    .relative {
        position: relative;
    }

    .table-info {
        margin-top: 18px;
    }

    .table-info .clearfix span {
        color: var(colorPrimary1);
        display: inline-block;
        font-weight: 200;
        font-size: 20px;
        margin-top: 2px;
    }


    .receive-inventory-scan-button-area {
        padding: 14px;
        background-color: var(colorPrimaryNeutral0);
        margin-top:15px;
    }

    .receive-inventory-scan-button-area mdt-button {
        margin-bottom: 0;
    }

    .receive-inventory-general-toast-area {
        margin-top:15px;
        margin-bottom:15px;
    }

    mdt-searchbar {
        margin-top: 15px;
    }

    .right {
        float: right;
    }

    .h3 {
        color: var(colorSecondaryNeutral1);
        font-size: 16px;
        font-weight: 200;
        line-height: 19px;
        margin: 0 0 5px 0;
    }

    .total-count-no-tabs {
        font-size: 20px;
        font-weight: 200;
        padding-left: 6px;
        color: var(colorSecondaryNeutral1);
        text-align: left;
    }

    .total-count-no-tabs strong {
        color: var(colorPrimary2);
        font-weight: 200;
    }

    mdt-tabs .total-count {
        /* Base text style */
        font-size: 20px;
        font-weight: 200;
        padding-right: 6px;
        color: var(colorSecondaryNeutral1);
    }

    mdt-tabs .total-count strong {
        color: var(colorPrimary2);
        font-weight: 200;
    }

    @media screen and (min-width: var(breakpointDtoDHD)) {
        :scope .container {
            width: 1135px;
        }
    }

    @media screen and (min-width: var(breakpointMtoT)) {
        :scope .container {
            width: auto;
        }
        :scope > span {
            width: auto;
        }
        :scope .table-info > span {
            font-size: 20px;
            margin-top: 0;
        }
    }

    /* mdt-tabs style temp override */
    [role=topbuffer]{
        height:10px;
        background:var(colorPrimary6);
    }
    [role=bottombuffer]{
        height:0px;
        background:var(colorPrimary5);
    }
    [role=wrapper]{
        overflow:hidden;
        background:var(colorPrimary6);
    }
    [role=tab]{
        width:33.33%;
        color:var(colorPrimaryNeutral0);
        height:35px;
        line-height:35px;
        float:left;
        background:var(colorPrimary4);
        cursor:pointer;
        font-size: 16px;
        text-align: center;
        text-transform: uppercase;
        border-right:1px solid var(colorPrimary4);
        border-top:1px solid var(colorPrimary4);
    }
    [role=tab]:not(.active):hover{
        background:var(colorPrimaryAlternate2);
    }

    [role=tab].active {
        cursor:auto;
        background: var(colorPrimary2);
    }

    [role="custom-content"] {
        float: right;
        text-align: right;
    }

    eservices-warning-toast {
        margin-top: 10px;
    }
</style>

<!-- general PO info -->
<mma-receive-inventory-review-head-info po-number="{ order.po }"
                                        po-date="{ order.submissiondate}"
                                        supplier-name="{ order.supplier.name }"
                                        po-is-noar="{ order.isnoar }"
                                        noar-reason="{ order.reason.name }"
                                        po-itemsinshipment=" { order.itemsinshipment }"
                                        />

<div class="receive-inventory-general-toast-area">
    <!-- cancel submit scanned results buttons -->    
    <div class="container-fluid receive-inventory-scan-button-area" each="{ displaySubmitActionButtons ? [true] : [] }">
        <div class="row" >
            <div class="col-md-6">
                <mdt-button name="mdt-receiveinventory-scan-cancel" label="{__('nis.receiveInventoryScan.buttons.cancel')}" context="cancel"
                    onclick="{cancelCheckin}" disabled="{ !cancelButtonEnabled }" />
            </div>
            <div class="col-md-6">
                <mdt-button name="mdt-receiveinventory-scan-reviewandsubmit" label="{__('nis.receiveInventoryScan.buttons.submit')}" context="primary"
                    type="submit" onclick="{submitCheckin}" disabled="{ !submitButtonEnabled}"
                />
            </div>
        </div>
    </div>

     <eservices-warning-toast each="{warning ? [true] : []}" title="{warning.title}" message="{warning.message}" cancel-label="{warning.cancelLabel}"
                             confirm-icon="{warning.cancelIcon}" confirm-label="{warning.confirmLabel}" oncancel="{warning.cancelCallback}" onconfirm="{warning.confirmCallback}">
    </eservices-warning-toast>

    <!-- cancel checking toast -->
    <eservices-warning-toast each="{ (displayCheckinCancelToast) ? [true] : [] }"
                            title="{__('nis.receiveInventoryScan.cancelCheckinToast.title')}"
                            message="{ __('nis.receiveInventoryScan.cancelCheckinToast.content')}"
                            onconfirm="{onCancelCheckinConfirm}"
                            oncancel="{onCancelCheckinCancel}"
                            confirm-label="{__('nis.receiveInventoryScan.cancelCheckinToast.buttonConfirm')}"
                            cancel-label="{__('nis.receiveInventoryScan.cancelCheckinToast.buttonCancel')}"/>

    <!-- mark all as damaged toast -->
    <mma-receive-inventory-scan-table-warninginput-toast
                                        title="{__('nis.receiveInventoryScan.scanitemstatustoasts.alldamaged.title')}"
                                        content="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alldamaged.content') }"
                                        button-label-cancel="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alldamaged.buttonCancel') }"
                                        button-label-confirm="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alldamaged.buttonConfirm') }"
                                        input-label="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alldamaged.commentinputlabel') }"
                                        input-placeholder="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alldamaged.commentinputplaceholder') }"
                                        onconfirm="{ onSubmitMarkAllAsDamaged }"
                                        oncancel="{ onCancelMarkAllAsDamaged }"
                                        each="{ displayMarkAllAsDamagedToast ? [true] : [] }"
                                        inline="{ false }"
                                        />
    <!-- not in catalog toast -->
    <mma-receive-inventory-scan-warning-toast
                                        title="{ __('nis.receiveInventoryScan.scanitemstatustoasts.notincatalog.title') }"
                                        content="{ __('nis.receiveInventoryScan.scanitemstatustoasts.notincatalog.content') }"
                                        button-label-confirm="{ __('nis.receiveInventoryScan.scanitemstatustoasts.notincatalog.buttonConfirm') }"
                                        onconfirm="{ onSubmitNotInCatalog }" 
                                        each="{ displayNotInCatalogToast ? [true] : [] }"
                                        inline="{ false }"
                                    />

    <!-- item already received on already received list -->
    <mma-receive-inventory-scan-warning-toast
                                    title="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alreadyreceived.title') }"
                                    content="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alreadyreceived.content') }"
                                    button-label-confirm="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alreadyreceived.buttonConfirm') }"
                                    onconfirm="{ onSubmitAlreadyReceived }"
                                    each="{ displayIsAlreadyReceivedToast  ? [true] : [] }"
                                    inline="{ false }"
                                    />

    <!-- serialised item already in stockroom -->
    <mma-receive-inventory-scan-warning-toast
                                    title="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alreadyinstockroom.title') }"
                                    content="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alreadyinstockroom.content') }"
                                    button-label-confirm="{ __('nis.receiveInventoryScan.scanitemstatustoasts.alreadyinstockroom.buttonConfirm') }"
                                    onconfirm="{ onSubmitAlreadyInStockroom }"
                                    each="{ displayAlreadyInStockroomToast  ? [true] : [] }"
                                    inline="{ false }"
                                    />
</div>

<!-- scan section -->
<mdt-searchbar name="scanInput" disabled="{ isScanDisabled }" icon-face="barcode" action-context="tertiary" mode="scan" placeholder="{ __('nis.receiveInventoryScan.scanPlaceholder') }"
    each="{ displaySc anSearchBar ? [true] : [] }" storage="{storage}">
</mdt-searchbar>

<audio name="audioPlayer" >
    <source src="mp3/UBDError.mp3" type="audio/mpeg" />
        { __('generic.audio.audioCompatibilityError.notSupported') }
</audio>

<mma-receive-inventory-scan-toast-error each="{ displayScanErrorToast ? [true] : [] }"></mma-receive-inventory-scan-toast-error>
<mma-receive-inventory-scan-toast-missing-information each="{ displayMissingInfosToast ? [true] : [] }"></mma-receive-inventory-scan-toast-missing-information>
<mma-receive-inventory-scan-toast-manual-entry each="{ displayManualEntryToast ? [true] : [] }"></mma-receive-inventory-scan-toast-manual-entry>

<!-- list of scanned products -->
<div>
    <div each="{ tabsVisible ? [] : [true] }" class="total-count-no-tabs">{ __('nis.receiveInventoryScan.labels.totalScannedCount') }&nbsp;<strong>{totalScannedCount}</strong></div>
</div>

<mdt-tabs each="{ tabs && tabsVisible  ? [true] : []}" name="tabSelector" tabs="{ parent.tabs }" onselect="{parent.onTabSelected}">
    <span if="{parent.displayProductsToBeReceived}" class="total-count">{ __('nis.receiveInventoryScan.labels.totalScannedCount') }&nbsp;<strong>{parent.totalScannedCount}</strong></span>
    <span if="{parent.displayProductsReceived}" class="total-count">{ __('nis.receiveInventoryScan.labels.totalReceivedCount') }&nbsp;<strong>{parent.totalReceivedCount}</strong></span>
</mdt-tabs>

<mma-receive-inventory-scan-table table-interaction-disabled="{ isTableInteractionDisabled }" />

<script>
    var self = this;
    //if no param is passed in the url, assume its a noar
    this.orderId = riot.router.current.params.orderid;
    RiotBus.requestStore('receiveinventoryscan', this, this.orderId ? this.orderId : null);

    this.storage = {scanInput: ''};

    this.store = this.stores.receiveinventoryscan;
    this.states = this.stores.receiveinventoryscan.states;

    this.on('update', function() {
        self.displayScanErrorToast = self.stores.receiveinventoryscan.is(this.stores.receiveinventoryscan.states.SCAN_ERROR);
        self.displayMissingInfosToast = this.stores.receiveinventoryscan.is(this.stores.receiveinventoryscan.states.MISSING_INFORMATION) && !this.stores.receiveinventoryscan.is(this.stores.receiveinventoryscan.states.MANUAL_ENTRY);
        self.displayManualEntryToast = this.stores.receiveinventoryscan.is(this.stores.receiveinventoryscan.states.MANUAL_ENTRY);
        self.isScanDisabled = !this.stores.receiveinventoryscan.is(this.stores.receiveinventoryscan.states.SCAN_ENABLED);

        self.displaySubmitActionButtons = true;
        self.displayCheckinCancelToast = false;
        self.displayCheckinSubmitToast = false;
        self.displayMarkAllAsDamagedToast = false;
        self.displayNotInCatalogToast = false;
        self.displayIsAlreadyReceivedToast = false;
        self.displayAlreadyInStockroomToast = false;

        if( self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.CHECKIN_CANCEL) ) {
            self.displayCheckinCancelToast = true;
        };

        if( self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.CHECKIN_SUBMIT) ) {
            self.displayCheckinSubmitToast = true;
        };

        if( self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.MARK_ALL_AS_DAMAGED) ) {
            self.displayMarkAllAsDamagedToast = true;
        };

        if( self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.SCAN_ERROR_NOTINCATALOG) ) {
            self.displayNotInCatalogToast = true;
        };

        if( self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.ALREADY_RECEIVED) ) {
            self.displayIsAlreadyReceivedToast = true;
        };

        if( self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.ALREADY_INSTOCKROOM) ) {
            self.displayAlreadyInStockroomToast = true;
        };


        //todo: use state for this?
        var isAnyItemInErrorState = _.any(self.stores.receiveinventoryscan.getItems(), function(item) { return self.isItemInErrorState(item);});

        self.displaySubmitActionButtons = !self.displayMarkAllAsDamagedToast && !self.displayAlreadyInStockroomToast && !self.displayIsAlreadyReceivedToast && !self.displayNotInCatalogToast && !self.displayCheckinCancelToast && !self.displayCheckinSubmitToast &&
                    !(self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.MISSING_INFORMATION) || self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.MANUAL_ENTRY));

        self.displayScanSearchBar = !self.displayCheckinSubmitToast && !self.displayCheckinCancelToast && !self.displayMarkAllAsDamagedToast;
        self.submitButtonEnabled = self.displaySubmitActionButtons && (!self.displayCheckinCancelToast && !self.displayCheckinSubmitToast && !self.displayAlreadyInStockroomToast && !self.displayIsAlreadyReceivedToast) && !isAnyItemInErrorState;//&& self.totalScannedCount >0  
        self.cancelButtonEnabled = self.displaySubmitActionButtons && (!self.displayCheckinCancelToast && !self.displayCheckinSubmitToast);

        self.tabs = self.stores.receiveinventoryscan.getTabs();
        self.tabsVisible = _.any(self.tabs, function(tab) { return tab.isVisible() === true; });

        self.displayProductsToBeReceived = self.stores.receiveinventoryscan.isTabSelected(self.stores.receiveinventoryscan.tabids.TAB_PRODUCTSTOBERECEIVED);       
        self.displayProductsReceived = self.stores.receiveinventoryscan.isTabSelected(self.stores.receiveinventoryscan.tabids.TAB_PRODUCTSRECEIVED);

        if(!self.displayProductsToBeReceived && !self.displayProductsReceived){
            self.displayProductsToBeReceived = true;
        }

        self.isScanDisabled = !self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.SCAN_ENABLED) || isAnyItemInErrorState
            || self.displayMarkAllAsDamagedToast || self.displayAlreadyInStockroomToast || self.displayIsAlreadyReceivedToast || self.displayNotInCatalogToast || self.displayMissingInfosToast || self.displayManualEntryToast
            || self.displayProductsReceived;
            //TODO: instead of doing these checks, on every set of MISSING_INFORMATION, MANUAL_ENTRY, SCAN_ERROR_NOTINCATALOG, we should also remove scanenabled

        self.isTableInteractionDisabled = function() { return self.isScanDisabled;};

        if(!self.isScanDisabled){
            /*
            setTimeout(function(){
               $("[name='scanInput']").find('input').focus();

               $("[name='scanInput']").find('input').focusout(function(){
                   $("[name='scanInput']").find('input').focus();
               });
           }, 1);
           */

           //$("[name='scanInput']").setFocus();
           debugger;
           this.tags.scanInput.setFocus();


        }


        self.buildWarning();
    });

    /**
     * Building warning toast references
     */
    this.buildWarning = function () {
        self.flushWarning();

        if(self.store.is(self.states.SCAN_ERROR_INVALID_FOR_SUPPLIER)) {
            self.warning = {
                title: __('nis.receiveInventoryScan.warning.invalidForSupplier.title'),
                message: __('nis.receiveInventoryScan.warning.invalidForSupplier.message'),
                confirmLabel: __('nis.receiveInventoryScan.warning.invalidForSupplier.ok'),
                confirmCallback: self.onScanInvalidForSupplierConfirm
            };
        }

        if (self.warning) {
            window.scrollTo(0, 0);
        }
    };

    /**
     * Killingwarning toast references
     */
    this.flushWarning = function () {
        if (self.warning) {
            self.warning.title = null;
            self.warning.message = null;
            self.warning.cancelLabel = null;
            self.warning.cancelIcon = null;
            self.warning.confirmLabel = null;
            self.warning.cancelCallback = null;
            self.warning.confirmCallback = null;
            self.warning = null;
        }
    };

    this.isItemInErrorState = function(instance) {
        return instance.isalreadyreceived
            || (instance.isunexpected && !instance.isunexpectedconfirmed) 
            || (instance.isshortdated && !instance.isshortdatedconfirmed)
            || (instance.isexpired && !instance.isexpiredconfirmed)
            || (instance.isovershipment && !instance.isovershipmentconfirmed)
            || (instance.markasdamaged && !instance.isdamagedconfirmed);
    },

    this.on('mount', function(){
        this.orderId = riot.router.current.params.orderid;
        RiotBus.on('receiveinventoryscan.changed', this.refreshFromStore);
        RiotBus.on('beforeunload', this.beforeUnload);

        this.root.addEventListener('mdtsearchchange', this.scan);

        this.refreshFromStore();
    });

    this.on('unmount', function(){
        RiotBus.releaseStore('receiveinventoryscan', this);
        RiotBus.off('receiveinventoryscan.changed', this.refreshFromStore);
        RiotBus.off('beforeunload', this.beforeUnload);
        this.root.removeEventListener('mdtsearchchange',  this.scan);
    });

    this.scan = function(e) {
        RiotBus.trigger('scan.item.scancodebar', e.target.value);

        // Reset value
        self.storage.scanInput = "";
        self.update();
    };

    this.submitCheckin = function(e){
        RiotBus.trigger('receiveinventoryscan.submitCheckin');
    };

    this.cancelCheckin= function(e){           
        RiotBus.trigger('receiveinventoryscan.cancelCheckin');
    };

    this.refreshFromStore = function() {
        self.order = self.stores.receiveinventoryscan.getOrder();
        self.totalScannedCount = self.stores.receiveinventoryscan.getScannedItemsCount();
        self.totalReceivedCount = self.stores.receiveinventoryscan.getItemsReceivedCount();

        // Sound effect on error
        if (self.stores.receiveinventoryscan.is(self.stores.receiveinventoryscan.states.SCAN_ERROR)) {
          self.audioPlayer.play();
        }

        self.update();
    };

    this.beforeUnload = function(e){
        RiotBus.trigger('receiveinventoryscan.beforeunload', e);
    },

    this.onTabSelected = function(e) {
        RiotBus.trigger('receiveinventoryscan.tabselected', e.currentTarget.value)
    };

    this.onCancelCheckinCancel = function() {
        RiotBus.trigger('receiveinventoryscan.cancelCheckin.cancel');
    };

    this.onCancelCheckinConfirm = function() {
        RiotBus.trigger('receiveinventoryscan.cancelCheckin.confirm');
    };

    this.onCancelMarkAllAsDamaged = function() {
        RiotBus.trigger('receiveinventoryscan.markallasdamaged.cancel');
    };

    this.onSubmitMarkAllAsDamaged = function(comments) {            
        RiotBus.trigger('receiveinventoryscan.markallasdamaged.submit', comments);
    };

    this.onSubmitNotInCatalog = function() {
        RiotBus.trigger('receiveinventoryscan.notincatalog.submit');
    };

    this.onSubmitAlreadyReceived = function() {
        RiotBus.trigger('receiveinventoryscan.alreadyreceived.submit');
    };

    this.onSubmitAlreadyInStockroom = function() {
        RiotBus.trigger('receiveinventoryscan.alreadyinstockroom.submit');
    };

    this.onScanInvalidForSupplierConfirm = function() {
        RiotBus.trigger('receiveinventoryscan.productinvalidforsupplier.confirm');
    };

</script>

我知道这是很多代码，但我对riotjs很新，所以要确保你们可以看到拼写错误。

所以if（！self.isScanDisabled）{}我想访问mdt-searchbar。标签数组仅包括mma-receive-inventory-review-head-info和mma-receive-inventory-scan-table。

有什么想法吗？

Answer 1

 if(isScanEnabled){
               if (self.scanInput) {
                    self.scanInput._tag.setFocus();
               }

            }

在第一次运行中执行函数时DOM尚未就绪，因此检查标记是否存在并等待几个周期