静态编译的兜底方案

不需要在模板中二次加工和组装的数据，均可以静态分析出依赖关系及引用关系，考虑到实际场景中的便捷应用，还是需要讨论下模板中二次组装数据的静态分析与编译

在magix里，html模板、样式与控制它们的js代码是互相独立分离的，设计上尽可能让它们之间是松散的引用关系，比如在html模板中写事件触发js里的监听函数，如果要传递对象数据，在html模板中只能存字符串，无法存对象，这时候就需要进行一定的转换处理，把html模板中的字符串映射到js中的对象上来。

数据引用

在magix里数据引用分两大块，一块是view参数的传递，一块是事件参数的传递，这两块背后使用的是同样的技术方案。以view参数为例，如下代码

<mx-vframe src="./path/to/view" *user="{{# user }}"/>

在path/to/view.js的代码里，我们就能通过user获取到传递进来的user对象数据

magix-composer会从html中对，user分析出唯一的从js代码访问数据的引用路径，做为字符串放在html里，而在渲染时，再通过这唯一的字符串路径还原出对应的数据对象。

而这种分析并不是任何场景下都可以分析出来的，比如打10个

{{for(let i=0;i<10;i++)}}
<mx-vframe src="./path/to/view" *user="{{# user[i].info }}"/>
{{/for}}

因为局部变量i的存在，无法准确分析user[i].info表达式的唯一路径，这时候就需要进行辅助，如

{{for(let i=0;i<10;i++)}}
<mx-vframe src="./path/to/view" *user="{{# [user,i,user[i].info] }}"/>
{{/for}}

同样，比如事件中的

{{set a=20}}
<div mx-click="doSomething({info:'{{# info||a }}'})"></div>

同样需要给出计算唯一路径的方式，如

{{set a=20}}
<div mx-click="doSomething({info:'{{#[info,'a variable', info||a] }}'})"></div>

2021-06-14

已调整数据引用的分析计算，当成分析出唯一路径时，则直接使用唯一路径，如果不能分析出唯一路径时，则会在运行时临时生成一个。这样即可以确保在大多数使用数据驱动思路的界面上，可以分析出唯一路径，而在复杂的情况下，也能确保使用者简洁。

统一数据引用写法:<mx-vframe src="./path/to/view" *p="{{# object.params}}"/>

双向绑定

我们在进行显示时，有可能进行复合表达式

<input value="{{: user.name || user.firstName}}"/>

以上表达式其实可拆分为

<input value="{{= user.name || user.firstName}}" {{: user.name || user.firstName}}/>

即：如何展示js中的数据和如何把html中的数据同步回js中，而对于显示，无论什么样的表达式均可以支持，但回写进js的表达式就需要唯一的路径，比如{{: user.name || user.firstName}}是无法分析出如何进行回写的。

这时候就需要进行辅助，比如

<input value="{{= user.name || user.firstName}}" mx-syncexpr="[['user.name'],['user.firstName']]" />

当然也支持变量，比如

{{for (let i=0;i<10;i++) }}
<input value="{{= user.name || user.firstName}}" mx-syncexpr="[['user.{{=i}}.name'],['user.{{=i}}.firstName']]" />
{{/for}}

xinglie / xinglie.github.io