尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Page2 - Multiply

Page2 - Multiply Page2 - Multiply【免费下载链接】taipyTurns Data and AI algorithms into production-ready web applications in no time.项目地址: https://gitcode.com/GitHub_Trending/ta/taipyOperand 1: |{operand_1}|slider|ids1|Operand 2: |{operand_2}|slider|ids2|Operand 1 * Operand 2 |{operand_1 * operand_2}|idv1|这是一份完整的 Taipy Markdown 页面模板体积虽小却浓缩了 Taipy GUI 的三大核心机制 1. **控件声明**通过 |...| 语法声明了两个滑块控件slider分别绑定到变量 operand_1 与 operand_2并各自带有一个 DOM 标识ids1 / ids2供前端脚本与测试定位 2. **表达式绑定**页面底部用 |{operand_1 * operand_2}|idv1| 实时渲染两个操作数的乘积说明控件属性不仅能绑定单个变量还能直接绑定 Python 表达式 3. **作用域语义**operand_1 与 operand_2 一个来自主模块全局作用域、一个来自页面类实例作用域二者的绑定差异正是本测试目录assets2_class_scopes要验证的核心行为。 ## 逐行拆解Taipy Markdown 控件语法与表达式求值 ### |{operand_1}|slider|ids1|滑块控件的声明方式 |...| 是 Taipy Markdown 渲染器识别控件的专用语法其通用格式为 markdown |{绑定表达式}|控件类型|属性名属性值|...|以第一行为例{operand_1}控件的值属性大括号表示这是一个可双向绑定的变量——前端滑动滑块会回写该变量后端变量变化也会推送回前端slider控件类型标识声明这是一个滑块控件ids1为控件指定一个稳定的 DOM 标识。该标识直接映射到页面 HTML 元素的id属性这不仅是前端调试、自动化测试的锚点也是 Taipy 内部识别与更新该控件的依据。在 e2e 测试中可以看到该id的实际用途test_class_scopes_binding_global.py 通过page.wait_for_selector(#s1)、page.fill(#s1 input, 15)以及page.input_value(#s1 input)来等待、写入并断言滑块的值#v1则用于读取乘积结果文本。|{operand_1 * operand_2}|idv1|属性值支持表达式求值第三行没有控件类型直接以表达式作为默认内容。Taipy 会在前端浏览器端对{...}内的表达式进行求值并随变量变化实时刷新因此当你拖动任意一个滑块时operand_1 * operand_2的结果会立即更新无需任何 Python 回调。这种表达式即显示的能力来自 Taipy 渲染层对属性值的求值管线例如在 taipy/gui/_renderers/builder.py 中可以看到控件属性通过gui._evaluate_expr(...)解析表达式、并通过_getscopeattr(...)从作用域取值的实现路径。可以推断渲染器在生成页面时将{...}表达式解析为前端可执行的表达式同时在后端维护变量与控件的绑定关系。从 Markdown 到类作用域页面Page子类与create_pagepage2.md本身只是模板文件它由同目录下的类模块 page2.py 加载from taipy.gui import Markdown, Page class Page2(Page): def __init__(self) - None: self.operand_2 0 super().__init__() def create_page(self): return Markdown(page2.md)这揭示了一个关键模式页面级变量的作用域由类的实例属性定义。构造方法中self.operand_2 0把operand_2定义为该页面实例的成员变量初始值 0它只属于这个页面对象与其它页面互不干扰create_page()是Page基类定义的钩子方法返回页面内容。基类 taipy/gui/page.py 的文档明确指出子类必须重载create_page()并返回页面内容返回值可以是字符串——此时 Taipy 会将其当作 Markdown 内容解析。此处返回Markdown(page2.md)即读取同一目录下的模板文件生成页面渲染器super().__init__()触发基类构造逻辑基类会调用create_page()获取渲染器随后通过dict(vars(self))与inspect.getmembers(cls)收集页面实例的属性与方法存入_class_locals见 taipy/gui/page.py这些局部变量构成了该页面的独立作用域。同目录的 page1.py 展示了同类模式的加法页并额外带有一个回调方法class Page1(Page): def __init__(self) - None: self.operand_2 0 super().__init__() def create_page(self): return Markdown(page1.md) def reset(state): state.operand_2 0其模板 page1.md 中对应地多了|button|on_actionreset|idbtn_reset|按钮——点击后调用reset回调通过state.operand_2 0将本页面的operand_2归零。这个细节再次印证了operand_2是页面私有状态的定位。全局变量与页面作用域变量的绑定语义理解了模板与类模块之后再看测试 test_class_scopes_binding_global.py 是如何验证绑定行为的。测试的关键装配代码如下gui._set_frame(inspect.currentframe()) operand_1 0 # noqa: F841 gui.add_page(page1, Page1()) gui.add_page(page2, Page2()) helpers.run_e2e(gui)这里刻意构造了两种变量来源operand_1定义在测试函数主模块的局部作用域中属于全局绑定变量被page1、page2两个页面共同引用、共享同一份值operand_2定义在Page1/Page2各自的实例上属于类作用域变量每个页面维护自己独立的副本。Gui.add_page(name, page)taipy/gui/gui.py在注册页面时会调用_add_page_context更新局部变量上下文对类模块页面通过page._get_locals()取得_class_locals作为该页面的作用域来源而对普通模块页面则会self.__var_dir.add_frame(page._frame)记录其调用栈帧。这意味着类页面变量的生命周期与实例绑定普通函数/模块级变量的生命周期与主模块绑定。端到端验证跨页面导航下的数据流推演Playwright 测试模拟了真实用户的操作序列是理解绑定语义的最佳教材。逐步推演如下进入 page1初始断言三个控件值均为0/0/0。把s1填为 15v1变为15再把s2填为 20v1变为3515 20。此时全局operand_1 15page1 的operand_2 20导航到 page2断言滑块s1显示15全局变量跨页面共享、值被保留s2显示0page2 的operand_2是全新实例从初始值 0 开始v1 15 * 0 0。把s2填为 5v1变为75把s1填为 17v1变为85。此时全局operand_1 17page2 的operand_2 5返回 page1断言v1 3717 20。关键点在于 page1 的operand_2依然是此前设置的 20——页面实例在导航往返后状态被保留未被 page2 的 5 覆盖点击 Reset 按钮触发reset回调把 page1 的operand_2置 0最终v1 17。这一组断言完整刻画了两种作用域的生命周期差异行为场景operand_1全局/主模块operand_2类实例在 page1 修改影响所有页面仅影响 page1导航到 page2值保留15/17从初始值 0 重新开始返回 page1值保留17保留修改前的值20点击 reset不受影响page1 重置为 0测试中大量使用的page.wait_for_function(document.querySelector(#v1).innerText ! 0)则验证了前端表达式求值的实时性变量经滑块写入后乘积表达式在浏览器端立即重算并刷新 DOM无需刷新页面或调用 Python。把类作用域页面模式用进你自己的应用综合上述分析你可以直接用以下最小可运行骨架复刻这套模式注意将page2.md模板与Page2类放在同一目录# app.py from taipy.gui import Gui from pages.page2 import Page2 # 你的类模块 gui Gui() gui.add_page(page2, Page2()) # 注册类作用域页面 gui.run()模板文件pages/page2.md保持与上文一致的滑块 表达式写法即可。使用中需要留意的要点变量归属即作用域希望跨页面共享的数据如用户信息、全局配置放在主模块/全局变量中希望页面私有的状态如表单草稿、分页偏移定义为Page子类的实例属性页面名约束add_page的页面名不能以/开头、只能包含字母、数字、-、_与/且不能与已有路由重复见 taipy/gui/gui.py 的校验逻辑id属性的价值为控件指定稳定的id既方便前端自动化测试锚定元素也让表达式求值与变量回写有明确的定位依据初始化顺序实例属性必须在super().__init__()之前赋值Page2.__init__中self.operand_2 0位于super().__init__()之前因为基类构造时会通过vars(self)快照实例属性作为页面作用域。如果你想进一步验证这一行为可以直接运行仓库中的端到端测试pytest tests/gui/e2e/page_scopes/test_class_scopes_binding_global.py -m teste2e【免费下载链接】taipyTurns Data and AI algorithms into production-ready web applications in no time.项目地址: https://gitcode.com/GitHub_Trending/ta/taipy创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表