视图 — $mol

视图

视图就是一个组件：UI 树中的一个节点，拥有自己的布局、行为和样式。本章介绍视图如何声明、如何与逻辑连接、如何组合与复用。第一次接触 view.tree：

从 TypeScript 到 view.tree 把同一个组件写两遍——一遍手写类，一遍树——并展示树最终编译成的代码。如果下面的语法读起来像一门新语言而不是一种简写，先看那一页。

三个文件，一个组件

组件 $my_card 位于 my/card/，由最多三个文件描述，每个文件职责清晰：card.view.tree —— 组件是什么：它的结构和默认绑定。card.view.ts —— 它如何运作：TypeScript 方法、响应式状态。card.view.css.ts —— 它长什么样：由编译器检查的带类型样式。把结构、行为和样式分开是刻意为之——每个文件都保持短小易读，布局永远不会和逻辑纠缠在一起。这三个文件没有哪一个是单独必需的。去掉 card.view.tree，把类直接写进 namespace $：结构变成普通方法，组件照样能用。本章接下来用树，因为管道由别人替你生成之后，结构看起来就是这个样子。

view.tree 语言

view.tree 以声明式描述结构。缩进即嵌套；没有闭合标签。1$my_card $mol_view2 sub /3 <= Title $mol_view4 sub / <= title \5 <= Body $mol_view6 sub / <= text \$my_card $mol_view —— 你的组件继承自基类 $mol_view。sub / —— 子节点列表。<= Title $mol_view —— 一个命名子视图，在 TypeScript 中可通过 this.Title() 访问。<= title \ —— 一个可绑定属性，带一个默认的原始字符串值（\ 开始一个原始字符串）。每个大写名称（Title、Body）都会成为一个真实属性，你可以访问、覆盖或为它设置样式。每个小写绑定（title、text）都会成为一个你可以在 .view.ts 中计算的值。

绑定属性

两个运算符把属性连接到它的来源：<= 单向：子节点从所有者读取一个值。<=> 双向：值在两个方向上流动——用于输入控件。1$my_form $mol_view2 sub /3 <= Field $mol_string4 value? <=> text? \这里输入控件的 value 和所有者的 text 会自动保持同步：在字段中输入，text 就更新；在代码中设置 text，字段就反映出来。

连接到行为

没有默认值的绑定在 .view.ts 中实现。类继承自同名的生成基类：1namespace $.$$ {2 export class $my_card extends $.$my_card {3 @ $mol_mem4 title() {5 return 'Untitled'6 }7 }8}在 GitHub 上编辑此页这有帮助吗？是否上一页安装下一页状态与响应式本页内容三个文件，一个组件 view.tree 语言绑定属性连接到行为属性与元素类型列表与带键视图条件视图组合与复用下一步