gpt4 book ai didi

dart - 如何构建具有多个 View 的复杂 Web UI 应用程序?

转载 作者:行者123 更新时间:2023-12-03 11:09:12 24 4
gpt4 key购买 nike

我将构建具有许多不同 View 的复杂应用程序。想象一下例如 eshop 解决方案。可以有很多不同的观点:

  • 带有一些静态信息的联系页面
  • 新客户登记表
  • 查看您的订单
  • 产品列表
  • 产品详情
  • ...

  • 现在我有点困惑,如何使用 Web UI 构建如此复杂的应用程序。我希望将 View 的 HTML 模板分隔在多个文件中,并有一些逻辑来确定应该呈现哪一个。

    假设我想要一个包含页眉和页脚等基本内容的主模板,那么我有很多内容模板,这些模板应该被注入(inject)到主模板内的正确位置。

    到目前为止,我一直只看到使用 Dart Web UI 的小型单模板示例,所以我不知道如何实现这一点。

    最佳答案

    我已经整理了一个小例子来说明我目前是如何做到的(希望我们很快就会看到一个更大的最佳实践示例应用程序):

    这个例子的完整源代码见gist: How to build a Web UI application with multiple views in Dart

    主要应用

  • app.html - 包含主应用程序布局,实例化页眉和页脚组件并为 View 创建一个容器。
  • app.dart - 处理导航事件并替换 View 容器内的 View (见下文)
  • app.css

  • 网页组件

    页眉和页脚
  • header.html - 标题的 Web 组件
  • footer.html - 页脚的 Web 组件

  • 意见
  • contact.html - 联系人 View 的 Web 组件
  • contact.dart - 包含 ContactsView 类的 Dart 文件
  • products.html - 产品 View 的 Web 组件
  • products.dart - 包含 ProductsView 类的 Dart 文件

  • 在 View 之间切换

    instantiate Web Components 的标准方式是通过使用 <x-foo></x-foo> HTML .
    由于我们有不同的 View ,我们必须在 中实例化 Web 组件。 Dart 代码。为此,我们必须手动调用 Web 组件生命周期方法。这不是直截了当的,将来可能会改进(参见 Issue 93,其中还包含一些示例)。

    以下是切换 View 的方法( app.dart 的来源):

    import 'dart:html';
    import 'package:web_ui/web_ui.dart';

    import 'contact.dart';
    import 'products.dart';

    void main() {
    // Add view navigation event handlers
    query('#show-contact-button').onClick.listen(showContactView);
    query('#show-products-button').onClick.listen(showProductView);
    }

    // Used to call lifecycle methods on the current view
    ComponentItem lifecycleCaller;

    /// Switches to contacts view
    void showContactView(Event e) {
    removeCurrentView();

    ContactView contactView = new ContactView()
    ..host = new Element.html('<contact-view></contact-view>');

    lifecycleCaller = new ComponentItem(contactView)..create();
    query('#view-container').children.add(contactView.host);
    lifecycleCaller.insert();
    }

    /// Switches to products view
    void showProductView(Event e) {
    removeCurrentView();

    ProductsView productsView = new ProductsView()
    ..host = new Element.html('<products-view></products-view>');

    lifecycleCaller = new ComponentItem(productsView);
    lifecycleCaller.create();
    query('#view-container').children.add(productsView.host);
    lifecycleCaller.insert();
    }

    void removeCurrentView() {
    query('#view-container').children.clear();

    if (lifecycleCaller != null) {
    // Call the lifecycle method in case the component needs to do some clean up
    lifecycleCaller.remove();
    }
    }

    这里是 app.html 的来源:

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8">
    <title>A Complex Web UI Application</title>
    <link rel="stylesheet" href="app.css">

    <!-- import the header and footer components -->
    <link rel="components" href="header.html">
    <link rel="components" href="footer.html">

    <!-- import the view components -->
    <link rel="components" href="contact.html">
    <link rel="components" href="products.html">
    </head>
    <body>
    <header-component></header-component>

    <div id="view-container"></div>

    <button id="show-contact-button">show contact view</button>
    <button id="show-products-button">show products view</button>

    <footer-component></footer-component>

    <script type="application/dart" src="app.dart"></script>
    <script src="packages/browser/dart.js"></script>
    </body>
    </html>

    备注 : 我必须通过 <link rel="components" href="contact.html"> 导入 View 组件即使我没有在 HTML 文件中直接引用它。

    关于dart - 如何构建具有多个 View 的复杂 Web UI 应用程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16188370/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com