Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
zpin-templates
Advanced tools
这允许您向HTML的子树添加条件。 如果条件求值为true,则返回子树; 否则,不会计算。 它被实现为三元表达式。 例子:
<div rt-if="this.data.resultCode === 200">Success!</div>
当resultCode等于200时会显示Success!,否则不显示
对数组中的每个项重复一个DOM节点及其子树。 语法是rt-repeat =“itemVar,arrayExpr中的indexVar”,其中元素itemVar将在JavaScript上下文中可用,并且将创建一个itemVarIndex来表示项目的索引。 通过使用这种命名方案,重复的表达式可以访问所有级别的嵌套。 也可以使用语法rt-repeat =“itemVar,arrayExpr中的indexVar”声明自定义索引变量,在这种情况下,索引变量将是indexVar。 例子:
<div rt-repeat="myNum in this.data.MyNumbers">{myNumIndex}. {myNum}</div>
MyNumbers是一个数组,这里将遍历所有的MyNumbers,myNumIndex是数组的索引,myNum是数组元素
这个指令会创建一个虚拟节点,它并不会渲染成真实的DOM,但仍可用作指令的根,例如。 rt-if和rt-repeat。 例如 要立即重复几个节点,而不是为每个实例共享根:
<ul>
<rt-virtual rt-repeat="n in [1,2,3]">
<li>{n}</li>
<li>{n*2}</li>
</rt-virtual>
</ul>
这里每次循环都会给出两个li标签
此指令通过创建一个新方法并使用当前上下文调用它来创建一个新的JavaScript作用域。 语法是rt-scope =“expr1 as var1; expr2 as var2。这允许一个方便的速记,使代码更可读,它还有助于每个范围只执行一次表达式。 例子
<div rt-repeat="rpt in array">
<div rt-scope="')' as separator; rpt.val as val">{rptIndex}{separator} {val}</div>
<div>'rpt' exists here, but not 'separator' and 'val'</div>
</div>
这里调用把')'看做separator,rpt.val看做val,rt-scope这个作用域里,调用val就是调用rpt.val 后续表达式可以引用前面的变量,因为生成的代码将每个别名声明为var(与函数参数相反,函数参数仅在求值之后才绑定到形式参数名称),因此可以执行类似于
<div rt-scope="users[userId] as user; user.profile as profile; profile.avatar as avatar;">
当与rt-if一起使用时,rt-if条件首先被求值,并且仅当它是真实的,才处理rt-scope映射。 这意味着你可以这样写
<div rt-if="user.profile" rt-scope="user.profile.image as image">
这避免了去使用一个未定义的字段,否则你就要这样写user.profile && user.profile.image as image,这种写法是相当丑陋的 当与rt-repeat一起使用时,会为每次迭代计算rt-scope,以便iterations项和itemIndex在作用域中。
rt-props用于以编程方式将属性注入元素。 它将合并属性与模板中接收的属性。 此选项允许您基于外部逻辑构建属性并将它们传递到模板。 在将组件上设置的属性传递给模板中的元素时,它也很有用。 此属性的期望值是返回对象的表达式。 键将是属性名,值将是属性值。 例如:
<input style="height:10px;width:3px;" rt-props="{style:{width:'5px'},type:'text'}"/>
这里style属性将会做merge,最终得出的结果是height:10px;width:5px; 而input的类型将是text
要在编程设置类名时减少样板代码,可以使用rt-class伪指令。 它期望一个JSON对象,其中键作为类名称,布尔值作为值。 如果值为true,将包括类名称。 请注意以下事项: 1.如果在同一个HTML元素上同时使用class和rt-class,它们将被合并。 例子:
<div rt-scope="{blue: true, selected: this.isSelected()} as classes">
These are logically equivalent
<div rt-class="classes">Reference</div>
<div rt-class="{blue: true, selected: this.isSelected()}">Inline</div>
<div class="blue{this.isSelected() ? ' selected' : ''}">Using the class attribute</div>
</div>
(可选)选择从rt文件中提取静态内容。 rt-include是一个“宏”,它接受一个文本文件(例如svg / html / xml)并将其注入文件,就像它是原始标记的一部分。 例子: 主模板
<div>
<rt-include src="./my-icon.svg" />
</div>
my-icon.svg模板
<svg xmlns="http://www.w3.org/2000/svg">
<rect height="50" width="50" style="fill: #00f"/>
</svg>
等效于:
<div>
<svg xmlns="http://www.w3.org/2000/svg">
<rect height="50" width="50" style="fill: #00f"/>
</svg>
</div>
事件处理程序通过对浏览器原生事件跨浏览器的封装,使事件处理能够跨浏览器兼容,所以以下的事件都不是浏览器原生事件,注意区别
<input>
, <keygen>
, <select>
,和 <textarea>
)两种方式去注册事件,一个是onClick =“{this.myClickHandler}”。 当不需要函数时,可以使用lambda表示法,lambda表示法的形式为:onClick =“(evt)=> console.log(evt)”。 在此示例中,evt是传递到内联函数的第一个参数的名称。但是,如果你期望一个以onSomething开头的属性,那么模板会将其视为事件处理程序。 如果你有一个名为onBoxSelected的事件处理程序触发一个行和列参数的事件,你可以写入onBoxSelected =“(row,col)=> this.doSomething(row,col)”。 还支持无参数版本:onClick =“()=> console.log('只是想知道它点击')”。 例如:
<div rt-repeat="item in items">
<div onClick="()=>this.itemSelected(item)" onMouseDown="{this.mouseDownHandler}">
</div>
FAQs
Light weight templates for react -> write html get valid react code
The npm package zpin-templates receives a total of 0 weekly downloads. As such, zpin-templates popularity was classified as not popular.
We found that zpin-templates demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.