我正在尝试为用户创建动态模板界面,以构建他们认为合适的电子邮件模板。

我想允许他们在创建过程中将任何可用的动态数据插入模板,并在他们进行更改时实时显示在预览中。

我可以使用AngularJS,Durandal,Ember或其他一些JS库使它变得精简而优雅吗?

最佳答案

我无法与AngularJS或Ember交谈,但是我可以说,对于Durandal来说,这与Durandal本身并没有关系。作为开发人员,我们使用各种模板技术-把手,剔除模板,Durandal的合成引擎等。

但是,如果您希望向用户公开此功能,则有所不同。对于我们来说,微不足道的是,开发人员可能会使最终用户感到困惑。因此,首先,请考虑以下几点:


合并字段的表示形式:{{PROJECT_NAME}}或[[PROJECT_NAME]]或@ProjectName等。
您希望公开可用合并字段的方式:每个客户端实体都需要一种一致的方式公开合并字段
用户实际将合并字段拖放到电子邮件文本中的方法:用户单击合并字段的下拉列表,在插入符号的位置自动完成,从合并字段的边栏列表中拖放等。
一种小型DSL(特定于域的语言),用户可以使用其中的一些功能来操纵合并字段:@uppercase({{PROJECT_NAME}}),@today()等。
安全性:编码电子邮件文本以阻止恶意


我们目前正在开发基于Durandal的桌面应用程序版本。以下是桌面版的两个屏幕截图,以及我们如何完成您要尝试的操作:




该应用程序的Durandal版本看起来有些不同,但基本相同。

在Durandal中,所有这些操作都是非常可行的,因为Durandal依赖于您已经知道(或可能知道)的技术:JavaScript,Knockout,HTML5和CSS。

当用户按下“ [”时,合并字段选择器弹出;当用户按下“ @”时,将弹出可用功能(现在,它们只是@ Uppercase,@ OptionalNA和@Optional)。

曝光实体属性

我们采用的方法是为每个实体维护一个字典,该字典将呈现给用户的合并字段的基于字符串的描述映射到该实体的可观察对象:

this.mergerDict = {mergerField: "CONTACT_FIRST_NAME", firstName: this.firstName()}


其中,this在实体的上下文中。一点点的underscore.js魔术使这个琐碎。

但是这样做的方法很多,毫无疑问,我们将通过一个更加开放的UI向最终用户提供合并字典的过程中进行重构。

10-05 21:15
查看更多