我创建了一个表单ui_component实例。字段已呈现但未填充。即使呈现的JSON包含数据,也不会显示。
我究竟做错了什么?什么是有效的调试步骤?
这就是我所拥有的。为了进行测试,我使实体变得非常小(两个字段:foo_id
和name
)。
ui_component XML:
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">example_foo_form.example_foo_form_data_source</item>
<item name="deps" xsi:type="string">example_foo_form.example_foo_form_data_source</item>
</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">example_foo_form</item>
</item>
<item name="label" xsi:type="string" translate="true">Foo Information</item>
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
<item name="navContainerName" xsi:type="string">left</item>
</item>
<item name="buttons" xsi:type="array">
<item name="save" xsi:type="string">Example\Foo\Block\Adminhtml\Foo\Edit\SaveButton</item>
</item>
</argument>
<dataSource name="example_foo_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Example\Foo\Model\Foo\DataProvider</argument>
<argument name="name" xsi:type="string">example_foo_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">foo_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="example_foo/foo/save"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="foo">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Foo Information</item>
</item>
</argument>
<field name="foo_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Foo ID</item>
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="dataScope" xsi:type="string">foo_id</item>
</item>
</argument>
</field>
<field name="name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Name</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="dataScope" xsi:type="string">name</item>
</item>
</argument>
</field>
</fieldset>
</form>
数据提供者:
<?php
namespace Example\Foo\Model\Foo;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
public function __construct(
\Example\Foo\Model\ResourceModel\Foo\CollectionFactory $collectionFactory,
$name,
$primaryFieldName,
$requestFieldName,
array $meta = [],
array $data = []
) {
$this->collection = $collectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
public function getData()
{
$data = parent::getData();
return array_reduce($data['items'], function ($result, array $item) {
$result[$item['foo_id']] = $item;
return $result;
}, []);
}
}
这是呈现的JSON(出于可读性的考虑,经过漂亮打印):
{
"types": {
"dataSource": {
"component": "Magento_Ui/js/form/provider"
},
"input": {
"extends": "example_foo_form"
},
"form.input": {
"extends": "input"
},
"textarea": {
"extends": "example_foo_form"
},
"form.textarea": {
"extends": "textarea"
},
"fieldset": {
"component": "Magento_Ui/js/form/components/fieldset",
"extends": "example_foo_form"
},
"example_foo_form": {
"component": "Magento_Ui/js/form/form",
"provider": "example_foo_form.example_foo_form_data_source",
"deps": "example_foo_form.example_foo_form_data_source"
},
"nav": {
"component": "Magento_Ui/js/form/components/tab_group",
"config": {
"template": "ui/tab"
},
"extends": "example_foo_form"
},
"html_content": {
"component": "Magento_Ui/js/form/components/html",
"extends": "example_foo_form"
},
"tab": {
"component": "Magento_Ui/js/form/components/area",
"extends": "example_foo_form"
}
},
"components": {
"example_foo_form": {
"children": {
"sections": {
"type": "nav",
"config": {
"label": "Foo Information"
},
"children": []
},
"areas": {
"type": "example_foo_form",
"config": {
"namespace": "example_foo_form"
},
"children": {
"foo": {
"type": "tab",
"dataScope": "data.foo",
"config": {
"label": "Foo Information"
},
"insertTo": {
"example_foo_form.sections": {
"position": 20
}
},
"children": {
"foo": {
"type": "fieldset",
"name": "foo",
"children": {
"name": {
"type": "form.input",
"name": "name",
"children": [],
"dataScope": "name",
"config": {
"component": "Magento_Ui/js/form/element/abstract",
"template": "ui/form/field",
"label": "Name",
"visible": true,
"dataType": "text",
"formElement": "input",
"displayArea": "body"
}
}
},
"config": {
"label": "Foo Information",
"displayArea": "body"
}
}
}
}
}
},
"example_foo_form_data_source": {
"type": "dataSource",
"name": "example_foo_form_data_source",
"dataScope": "example_foo_form",
"config": {
"data": {
"foo_id": "1",
"name": "test1"
},
"submit_url": "http://m2-example.localhost/admin/example/foo/save/key/f218ccaa2d4596ecc1f63770cd913793822e7f8489bd480ca007e3890f83a4b5/",
"params": {
"namespace": "example_foo_form"
}
}
}
}
}
}
}
只要有资格获得赏金,我就会很高兴地给100分赏金给一个好的答案,
—
Vinai 2016年
你在发问题!!! 有趣的:)
—
阿米特·贝拉
到目前为止,我发现整个UI组件都很难调试(或理解)。ui表单组件的devdocs pag对我没有用。我们需要付出很多努力才不会开始大声疾呼:)我将非常感谢您提供的良好答案!
—
维奈2016年
我有类似的问题!。保存成功后,数据将以未加载的ui格式存储。数据存储未加载到网格中
—
mrtuvn