# Knockout 调用子元素
**URL:** https://forum.magentochina.org/t/knockout-%E8%B0%83%E7%94%A8%E5%AD%90%E5%85%83%E7%B4%A0/721
**Category:** Magento 2.X
**Tags:** 开发, 教程, magento2
**Created:** [2020 年6 月 9 日 06:09 UTC](https://forum.magentochina.org/t/knockout-%E8%B0%83%E7%94%A8%E5%AD%90%E5%85%83%E7%B4%A0/721 "2020-06-09T06:09:22Z")
**Posts on this page:** 1
**Page:** 1
### 作者：  [@Vicky](https://forum.magentochina.org/u/Vicky)
#### 发布日期： [2020 年6 月 9 日 06:09 UTC](https://forum.magentochina.org/t/knockout-%E8%B0%83%E7%94%A8%E5%AD%90%E5%85%83%E7%B4%A0/721/1 "2020-06-09T06:09:22Z")
今天，我们介绍一下在 Magento2 中，Knockout 如何调用子元素。请按照给出的以下步骤操作。
### Magento2 中的 Knockout 是什么？
首先，我们需要理解 Magento2 中的 Knockout 的作用。在 Magento2 商店的前端中，Knockout 是一个设计模式为 Model-View-ViewModel (MMVM) Javascript 库。在 Magento2 的每一个页面中你都可以看到 Knockout，尤其是在结账页面用的最多。在有任何改变的情况下，Knockout 可以很容易地实现用户界面的自动更新。
### 在 Magento2 模板中，Knockou 调用子元素的概述
在 Magento2 模板中的 knockout，可以通过简单的步骤来调用子元素：
- 第一步：
在 Magento2 模板的布局中，创建两个子元素：child\_a 和 child\_b
- 第二步：
在 list.html 中声明所有的子元素
### 第一步，在 Magento2 模板的布局中，创建两个子元素：child\_a 和 child\_b
```auto
-
-
- Mageplaza_HelloWorld/js/view/customer/list
-
- Mageplaza_HelloWorld/customer/list
-
-
- 2
- Mageplaza_HelloWorld/js/view/customer/list
-
- Mageplaza_HelloWorld/customer/child_a
-
- 1
- Mageplaza_HelloWorld/js/view/customer/list
-
- Mageplaza_HelloWorld/customer/child_b
- child_b
```
### 第二步，在 list.html 中声明所有的子元素
可以使用以下命令在 list.html 中同时声明所有的子元素：
```auto
```
或者分别声明 “child\_a” 和 “child\_b”:
- 通过这个代码在 list.html 中声明 “child\_a”
```auto
```
- 然后，在文件 list.html 中，使用下面命令通过 displayArea 声明 “child\_b”
```auto
```
## 本教程翻译自Mageplaza模块开发系列，其他内容请点击下面链接:
> [@Magento2模块开发中文教程索引](https://forum.magentochina.org/t/magento2%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91%E4%B8%AD%E6%96%87%E6%95%99%E7%A8%8B%E7%B4%A2%E5%BC%95/36):
>
> 本文翻译自mageplaza的Magento2模块开发教程,而且正在翻译中. 翻译也是非常好的学习方式，希望下列表中还有我们没有翻译，而你又想分享的内容,请发表文章之后，在下面附上地址。 如果觉得本站翻译得内容对您有帮助，又没有时间帮助翻译回馈社区.请打赏我们，您的支持是我们的动力: 转载说明:非常欢迎转载，但是必须保证文章的完整性并附上原文地址和翻译原文的地址，保证阅读者不会产生歧义. 目录索引: 索 引 中 文 原 文 1 [Magento2如何创建模块](https://forum.magentochina.org/t/Magento-2%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E6%A8%A1%E5%9D%97%E6%95%99%E7%A8%8B/38)[How to Create Module in Magento 2](https://www.mageplaza.com/kb/how-create-hello-world-module-magento-2.html) 2 [控制器详解](https://forum.magentochina.org/t/Magento-2%E6%8E%A7%E5%88%B6%E5%99%A8%E8%AF%A6%E8%A7%A3%E6%95%99%E7%A8%8B/39)[Create Controllers](https://www.mageplaza.com/magento-2-module-development/how-to-create-controllers-magento-2.html) 3 [CRUD 模型](https://forum.magentochina.org/t/Magento2-CRUD%E6%A8%A1%E5%9E%8B%E8%B5%84%E6%BA%90%E9%9B%86%E5%90%88%E5%B7%A5%E5%8E%82%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3%E6%95%99%E7%A8%8B/43)[CRUD Models](https://www.mageplaza.com/magento-2-module-development/how-to-create-crud-model-magento-2.html) 4 [视图层:块,布局和模板](https://forum.magentochina.org/t/%E8%A7%86%E5%9B%BE%E5%B1%82%E5%9D%97%E5%B8%83%E5%B1%80%E5%92%8C%E6%A8%A1%E6%9D%BF%E6%A8%A1%E6%9D%BF%E6%95%99%E7%A8%8B/50/1)[View: Block, Layouts and templates](https://www.mageplaza.com/magento-2-module-development/view-block-layout-template-magento-2.html) 5 [配置system.xml](https://forum.magentochina.org/t/%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E7%B3%BB%E7%BB%9F%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6systemxml/55)[Configuration - System.xm…](https://www.mageplaza.com/magento-2-module-development/create-system-xml-configuration-magento-2.html)