如何管理DOM元素依赖关系

我正在尝试创建一个网页，其中一些元素（表单和按钮）在单击其他元素（按钮）时变得可见或隐藏。
我试图找到一种方法来管理它，它是可重用的，并且易于维护

我当前的解决方案如下所示，但我希望有人能有一个更优雅的解决方案。
我自己的解决方案的问题是，当依赖项的数量增加时，它将变得难以阅读。当我添加另一个按钮和表单时，它也需要大量的编辑

---

我当前的解决方案是使用一个可观察的对象来管理表单的状态，如下所示：

HTML:

显示表单A，隐藏按钮A和B
显示表单B，隐藏按钮A和B
…此表单最初是隐藏的
…一些形式元素
隐藏表单A，显示按钮A和B
…此表单最初是隐藏的
…一些形式元素
隐藏表单B，显示按钮A和B

省道：

导入'dart:html'；
进口“包装：观察/观察.省道”；
最终$=查询选择器；
最终$$=querySelectorAll；
映射到观察到的对象={
“showFormA”：假，
“showFormB”：错误
};
//制作一张可观察的地图
ObserveMap observeThis=Toobserved（toBeObserved）；
//开始管理依赖项
main（）{
//将单击事件添加到按钮
$（“#按钮-A”）
…onClick.listen（（E）=>observeThis[“showFormA”]=true）；
$（“#按钮-B”）
…onClick.listen（（E）=>observeThis[“showFormB”]=true）；
//将单击事件添加到表单按钮
$（“#取消-A”）
…一次点击。听（（E）{
E.预防违约（）；
E.停止传播（）；
观察结果[“showFormA”]=假；
});
$（“#取消-B”）
…一次点击。听（（E）{
E.预防违约（）；
E.停止传播（）；
观察结果[“showFormB”]=假；
});
//倾听变化
观察。改变。倾听（（L）{
其中（（E）=>E.key==“showFormA”）.forEach（（R）{
$（'#form-A'）.style.display=（R.newValue）？'block'：'none'；
$（“#按钮-A”）.style.display=（R.newValue | | observeThis['showFormB']）？“无”：“内联块”；
$（“#按钮-B”）.style.display=（R.newValue | | observeThis['showFormB']）？“无”：“内联块”；
});
其中（（E）=>E.key=='showFormB'）。forEach（（R）{
$（'#form-B'）.style.display=（R.newValue）？'block'：'none'；
$（“#按钮-A”）.style.display=（R.newValue | | observeThis['showFormA']）？“无”：“内联块”；
$（“#按钮-B”）.style.display=（R.newValue | | observeThis['showFormA']）？“无”：“内联块”；
});
});
}

您可以使用聚合物的模板功能，如

。。。

这应该在不将元素嵌入聚合物元素的情况下起作用。
提供了一些如何在不使用聚合物元件的情况下使用

的信息。 使用聚合物元素也可能有用。
这完全取决于您的需求/偏好

Angular.dart对于此类视图操作也很有用

---

如果您想使用普通Dart/HMTL，我不知道如何简化代码。

您可以使用polymer的模板功能，如

。。。

这应该在不将元素嵌入聚合物元素的情况下起作用。
提供了一些如何在不使用聚合物元件的情况下使用

的信息。 使用聚合物元素也可能有用。
这完全取决于您的需求/偏好

Angular.dart对于此类视图操作也很有用

---

如果您想使用普通Dart/HMTL，我不知道如何简化代码。

您可以使用类似的方法以通用方式处理所有元素：

final Iterable<ButtonElement> buttons = querySelectorAll('button')
    .where((ButtonElement b) => b.id.startsWith('button-'));

final Iterable<ButtonElement> cancels = querySelectorAll('button')
    .where((ButtonElement b) => b.id.startsWith('cancel-'));

final Iterable<FormElement> forms = querySelectorAll('form')
    .where((FormElement b) => b.id.startsWith('form-'));

buttons.forEach((b) {
  b.onClick.listen((e) {
    // name of clicked button
    final name = b.id.substring(b.id.indexOf('-') + 1);
    // hide all buttons
    buttons.forEach((b) => b.hidden = true)
    // show the good form
    querySelector('#form-$name').hidden = false;
  });
});

cancels.forEach((b) {
  b.onClick.listen((e) {
    // show all buttons
    buttons.forEach((b) => b.hidden = false);
    // hide all forms
    forms.forEach((b) => b.hidden = true);
    // prevent default
    e.preventDefault();
  });
});

// hide all form at startup
forms.forEach((f) => f.hidden = true);

final Iterable buttons=querySelectorAll（'button'））
.其中（（按钮元素b）=>b.id.startsWith（'button-'）；
final Iterable cancels=querySelectorAll（'按钮'）
.其中（（按钮元素b）=>b.id.startsWith（'cancel-'）；
final Iterable forms=querySelectorAll（'form'）
其中（（FormElement b）=>b.id.startsWith（'form-'）；
按钮。forEach（（b）{
b、 onClick.listen（（e）{
//单击按钮的名称
最终名称=b.id.substring（b.id.indexOf（'-'）+1）；
//隐藏所有按钮
buttons.forEach（（b）=>b.hidden=true）
//表现良好
querySelector（“#form-$name”）.hidden=false；
});
});
取消。forEach（（b）{
b、 onClick.listen（（e）{
//显示所有按钮
按钮。forEach（（b）=>b.hidden=false）；
//隐藏所有形式
forms.forEach（（b）=>b.hidden=true）；
//防止违约
e、 预防默认值（）；
});
});
//启动时隐藏所有窗体
forms.forEach（（f）=>f.hidden=true）；

您可以使用类似的方法以通用方式处理所有元素：

final Iterable<ButtonElement> buttons = querySelectorAll('button')
    .where((ButtonElement b) => b.id.startsWith('button-'));

final Iterable<ButtonElement> cancels = querySelectorAll('button')
    .where((ButtonElement b) => b.id.startsWith('cancel-'));

final Iterable<FormElement> forms = querySelectorAll('form')
    .where((FormElement b) => b.id.startsWith('form-'));

buttons.forEach((b) {
  b.onClick.listen((e) {
    // name of clicked button
    final name = b.id.substring(b.id.indexOf('-') + 1);
    // hide all buttons
    buttons.forEach((b) => b.hidden = true)
    // show the good form
    querySelector('#form-$name').hidden = false;
  });
});

cancels.forEach((b) {
  b.onClick.listen((e) {
    // show all buttons
    buttons.forEach((b) => b.hidden = false);
    // hide all forms
    forms.forEach((b) => b.hidden = true);
    // prevent default
    e.preventDefault();
  });
});

// hide all form at startup
forms.forEach((f) => f.hidden = true);

final Iterable buttons=querySelectorAll（'button'））
.其中（（按钮元素b）=>b.id.startsWith（'button-'）；
final Iterable cancels=querySelectorAll（'按钮'）
.其中（（按钮元素b）=>b.id.startsWith（'cancel-'）；
final Iterable forms=querySelectorAll（'form'）
其中（（FormElement b）=>b.id.startsWith（'form-'）；
按钮。forEach（（b）{
b、 onClick.listen（（e）{
//单击按钮的名称
最终名称=b.id.substring（b.id.indexOf（'-'）+1）；
//隐藏所有按钮
buttons.forEach（（b）=>b.hidden=true）
//表现良好
querySelector（“#form-$name”）.hidden=false；
});
});
取消。forEach（（b）{
b、 onClick.listen（（e）{
//显示所有按钮
按钮。forEach（（b）=>b.hidden=false）；
//隐藏所有形式
forms.forEach（（b）=>b.hidden=true）；
//防止违约
e、 预防默认值（）；
});
});
//启动时隐藏所有窗体
forms.forEach（（f）=>f.hidden=true）；

您可以使用基本CSS显示/隐藏元素

HTML

<div id="container" class="show-buttons">
    <button id="button-A" class="btn" data-group="a">...</button>
    <button id="button-B" class="btn" data-group="b">...</button>
    <form id="form-A" class="form group-a">...</button>
    <form id="form-B" class="form group-b">...</button>
</div>

在Dart中，只需从按钮获取

数据组

（或任何您想要调用的）属性。切换

包含菜单上的CSS类（
show按钮
、
show-a
和
show-b
）