Question

我试图了解Ui Components如何在Magento 2中工作。我创建了一个简单的模块，允许用户在前端触发路由时添加注释。我试图在客户编辑部分的管理员中显示这些评论。我按照this教程实现了Ui Component。但是，不知何故，我无法理解/调试为什么它没有按预期工作。而不是网格，我只能看到一个空白屏幕和检查元素，我在响应选项卡下得到关注

<!--
/**
 * Copyright &copy; 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
--><div class="admin__data-grid-outer-wrap" data-bind="scope: 'comments_listing.comments_listing'">
    <div data-role="spinner" data-component="comments_listing.comments_listing.comments_columns" class="admin__data-grid-loading-mask">
        <div class="spinner">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>
    <!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">{"*": {"Magento_Ui/js/core/app": {"types":{"dataSource":[],"column.massaction":{"extends":"comments_listing"},"text":{"component":"Magento_Ui\/js\/form\/element\/text","extends":"comments_listing"},"column.text":{"component":"Magento_Ui\/js\/form\/element\/text","extends":"comments_listing"},"columns":{"extends":"comments_listing"},"comments_listing":{"provider":"comments_listing.comments_data_source","deps":"comments_listing.comments_data_source"},"html_content":{"component":"Magento_Ui\/js\/form\/components\/html","extends":"comments_listing"}},"components":{"comments_listing":{"children":{"comments_listing":{"type":"comments_listing","name":"comments_listing","children":{"comments_columns":{"type":"columns","name":"comments_columns","children":{"ids":{"type":"column.massaction","name":"ids","config":{"component":"Magento_Ui\/js\/grid\/columns\/multiselect","indexField":"comment_id"}},"comment_id":{"type":"column.text","name":"comment_id","config":{"component":"Magento_Ui\/js\/grid\/columns\/column","componentType":"column","dataType":"text","filter":"textRange","sorting":"asc","label":"ID"}},"comment":{"type":"column.text","name":"comment","config":{"component":"Magento_Ui\/js\/grid\/columns\/column","componentType":"column","dataType":"text","label":"Comment","filter":"text","visible":true,"formElement":"input","source":"comment","validation":{"required-entry":true}}},"customer_id":{"type":"column.text","name":"customer_id","config":{"component":"Magento_Ui\/js\/grid\/columns\/column","componentType":"column","dataType":"text","visible":true,"formElement":"input","source":"customer_id","label":"Customer ID","filter":"text","validation":{"required-entry":true}}}},"config":{"component":"Magento_Ui\/js\/grid\/listing","componentType":"columns","storageConfig":{"provider":"comments_listing.comments_listing.listing_top.bookmarks","namespace":"current"},"childDefaults":{"storageConfig":{"provider":"comments_listing.comments_listing.listing_top.bookmarks","root":"columns.${ $.index }","namespace":"current.${ $.storageConfig.root}"},"controlVisibility":true}}}},"config":{"component":"uiComponent"}},"comments_data_source":{"type":"dataSource","name":"comments_data_source","dataScope":"comments_listing","config":{"data":{"items":[{"id_field_name":"comment_id","comment_id":"32","customer_id":"2","comment":"Comment Creation","orig_data":null},{"id_field_name":"comment_id","comment_id":"33","customer_id":"2","comment":"Comment Creation","orig_data":null}],"totalRecords":2},"component":"Magento_Ui\/js\/grid\/provider","update_url":"http:\/\/local.vanilla.in\/admin_s57zoo\/mui\/index\/render\/key\/3dbffd9c2a4123b1b44fd84ba0c958bdafa86ed523ed63e585733300f59de291\/","storageConfig":{"indexField":"comment_id"},"params":{"namespace":"comments_listing"}}}}}}}}}</script></div>

Screenshot of admin panel output

控制器（Pranav \ ByeUniverse \ Controller \ Adminhtml \ Index \ Display.php）

<?php
namespace Pranav\ByeUniverse\Controller\Adminhtml\Index;

use Psr\Log\LoggerInterface;

class Display extends \Magento\Framework\App\Action\Action
{
    private $_logger;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        LoggerInterface $logger
    )
    {
        $this->_logger = $logger;
        parent::__construct($context);
    }

    public function execute()
    {
        $this->_logger->debug("reached...");
        // $this->initCurrentCustomer();
        $this->_view->loadLayout();
        $this->_view->renderLayout();
//        return $this->resultLayoutFactory->create();
    }
}

布局（byeuniverse_index_display.xml）

<?xml version="1.0" ?>

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <container name="root" label="Root">
        <!--<block class="Pranav\ByeUniverse\Block\Adminhtml\Customer\View\Display" name="comparedproduct.edit.tab.compared" template="Pranav_ByeUniverse::grid.phtml"/>-->
        <uiComponent name="comments_listing"/>
    </container>
</layout>

UI组件（comments_listing.xml）

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

    <!-- main part of the grid -->
    <argument name="data" xsi:type="array">
        <!-- define where to find the date source -->
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">comments_listing.comments_data_source</item>
            <item name="deps" xsi:type="string">comments_listing.comments_data_source</item>
        </item>
        <!-- define where to find the columns -->
        <item name="spinner" xsi:type="string">comments_columns</item>

        <item name="buttons" xsi:type="array">
            <item name="add" xsi:type="array">
                <item name="name" xsi:type="string">add</item>
                <item name="label" xsi:type="string" translate="true">Add a new Comment</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/Addcomment</item>
            </item>
        </item>
    </argument>

     <!--define the date source (must be the same than in argument/item/provider and argument/js_config/deps-->
    <dataSource name="comments_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <!-- unique name for the grid -->
            <argument name="class" xsi:type="string">CommentsGridDataProvider</argument>
            <!-- name of the data source same as in argument/js_config/provider -->
            <argument name="name" xsi:type="string">comments_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">comment_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                    <item name="update_url" xsi:type="url" path="mui/index/render"/>
                    <item name="storageConfig" xsi:type="array">
                        <item name="indexField" xsi:type="string">comment_id</item>
                    </item>
                </item>
            </argument>
        </argument>
    </dataSource>

    <!-- define the columns of my grid -->
    <columns name="comments_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <!-- Bookmarks behaviour -->
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">comments_listing.comments_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="controlVisibility" xsi:type="boolean">true</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">comments_listing.comments_listing.listing_top.bookmarks</item>
                        <item name="root" xsi:type="string">columns.${ $.index }</item>
                        <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                    </item>
                </item>
            </item>
        </argument>

        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <!-- define which field will be used as ID -->
                    <item name="indexField" xsi:type="string">comment_id</item>
                </item>
            </argument>
        </selectionsColumn>

        <!-- Column ID -->
        <column name="comment_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                </item>
            </argument>
        </column>
        <!-- Column name -->
        <column name="comment">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Comment</item>
                    <item name="filter" xsi:type="string">text</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">comment</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </column>
        <!-- Column customer Id -->
        <column name="customer_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">customer_id</item>
                    <item name="label" xsi:type="string" translate="true">Customer ID</item>
                    <item name="filter" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="CommentsGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
        <arguments>
            <argument name="collection" xsi:type="object" shared="false">Pranav\ByeUniverse\Model\ResourceModel\Comment\Collection</argument>
            <argument name="filterPool" xsi:type="object" shared="false">CommentsGridFilterPool</argument> <!-- Define new object for filters -->
        </arguments>
    </virtualType>

    <virtualType name="CommentsGridFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
        <arguments>
            <argument name="appliers" xsi:type="array">
                <item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
                <item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
            </argument>
        </arguments>
    </virtualType>


    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="comments_data_source" xsi:type="string">Pranav\ByeUniverse\Model\ResourceModel\Comment\Grid\Collection</item>
            </argument>
        </arguments>
    </type>

    <virtualType name="Pranav\ByeUniverse\Model\ResourceModel\Comment\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
        <arguments>
            <argument name="mainTable" xsi:type="string">byeuniverse_comments</argument>
            <argument name="resourceModel" xsi:type="string">Pranav\ByeUniverse\Model\ResourceModel\Comment</argument>
        </arguments>
    </virtualType>
</config>

Pranav \ ByeUniverse \模型\ ResourceModel \评论\ Collection.php

<?php

namespace Pranav\ByeUniverse\Model\ResourceModel\Comment;

use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;

class Collection extends AbstractCollection
{
    protected function _construct()
    {
        $this->_init('Pranav\ByeUniverse\Model\Comment', 'Pranav\ByeUniverse\Model\ResourceModel\Comment');
    }
}

Pranav \ ByeUniverse \模型\ ResourceModel \评论\网格\ Collection.php

<?php

namespace Pranav\ByeUniverse\Model\ResourceModel\Comment\Grid;


class Collection extends \Pranav\ByeUniverse\Model\ResourceModel\Comment\Collection implements \Magento\Framework\Api\Search\SearchResultInterface
{
    /**
     * Set items list.
     *
     * @param \Magento\Framework\Api\Search\DocumentInterface[] $items
     * @return $this
     */
    public function setItems(array $items = null)
    {
        // TODO: Implement setItems() method.
    }

    /**
     * @return \Magento\Framework\Api\Search\AggregationInterface
     */
    public function getAggregations()
    {
        // TODO: Implement getAggregations() method.
    }

    /**
     * @param \Magento\Framework\Api\Search\AggregationInterface $aggregations
     * @return $this
     */
    public function setAggregations($aggregations)
    {

    }

    /**
     * Get search criteria.
     *
     * @return \Magento\Framework\Api\Search\SearchCriteriaInterface
     */
    public function getSearchCriteria()
    {
        return null;
    }

    /**
     * Set search criteria.
     *
     * @param \Magento\Framework\Api\SearchCriteriaInterface $searchCriteria
     * @return $this
     */
    public function setSearchCriteria(\Magento\Framework\Api\SearchCriteriaInterface $searchCriteria)
    {
        return $this;
    }

    /**
     * Get total count.
     *
     * @return int
     */
    public function getTotalCount()
    {
        return $this->getSize();
    }

    /**
     * Set total count.
     *
     * @param int $totalCount
     * @return $this
     */
    public function setTotalCount($totalCount)
    {
        return $this;
    }
}

资源模型

<?php

namespace Pranav\ByeUniverse\Model\ResourceModel;

use Pranav\ByeUniverse\Setup\InstallSchema;

class Comment extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
{
    protected function _construct()
    {
        $this->_init(InstallSchema::TABLE_COMMENTS, InstallSchema::COLUMN_COMMENT_ID);
    }
}

注意

InstallSchema::TABLE_COMMENTS = 'byeuniverse_comments';
InstallSchema::COLUMN_COMMENT_ID = 'comment_id';

数据库表＆＃39; byeuniverse_comments＆＃39; 有3列 comment_id （自动增量），评论（评论内容）， customer_id （来自customer_entity表的外键引用entity_id）

我很难调试上面的代码，我可以使用你们的帮助。

感谢。

Magento 2：UiComponent不工作

0 个答案: