avalon2学习教程05属性操作

avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样。

avalon1是这样操作属性的


其语法为

ms-attr-valueName="vmProp"

有多少个属性就写多个ms-attr-。其中不能省略。此外,还存在ms-title, ms-alt,ms-src, ms-href, ms-selected, ms-checked等等缩略写法。但估计很少人知道,到底哪些属性可以缩写,哪些不能。

avalon2从减轻用户的记忆出发,将你要操作的属性全部打包成一个对象,并规定,只能属性值才能使用@开头的vm属性。此外,avalon不存在ms-title这样的缩略写法。


或者


attrObj为vm的一个对象属性,但这个不太常用。

或者


ms-attr直接对应一个数组。这个灵感是来自ReactNative的style指令,它们可以通过数组,传入多个样式对象…………

不过无论你怎么搞,最后你传的东西能保持avalon内部能将它变回一个对象就行了。

有时你的对象很长,需要换行,avalon2也是支持的,即便你写得像以下这么恶心,avalon2还是能认出来。


        TODO supply a title
{{
                   @src ? 333: ‘empty‘
              }}

但为了性能起见,ms-attr最好还是保持在一行吧。

avalon2的ms-attr可以支持过滤器,但没有提供现成的过滤器,虽然用户进行编写。不过需要注意的是,这个过滤器要处理的是{title:‘111‘,ddd: ‘222‘, lang:222}这样的对象,而不是一个字符串。比如我们要将需要个属性转换成日期格式,你可以在你的过滤器里调用avalon自带的date过滤器。

时间: 2024-10-12 18:15:54

avalon2学习教程05属性操作的相关文章

avalon2学习教程06样式操作

avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Object"或ms-css="Array". 注意,当你用对象字面量的方式传参时,注意存在-号的键名要用""号括起来. 这个会报错.正确写法是以下两种 在avalon1.*系列,允许你在属性值中加入插值表达式,如 ms-css-width="prop&q

js学习笔记2---HTML属性操作

1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连接: + 3.属性写操作:(“添加”)替换.修改 a) 语法:元素.属性名 = 新的值 如:document.getElementById(“btn”).value = “嘛呢嘛呢哄~变变变”; 4.元素内容操作:(“添加”)替换.修改 oP.innerHTML           读取元素内的所有

Python入门学习教程:数据库操作,连接MySql数据库

各位志同道合的同仁可以点击上方关注↑↑↑↑↑↑ 本教程致力于程序员快速掌握Python语言编程. 本文章内容是基于上次课程Python教程:Python教程:连接数据库,对数据进行增删改查操作 和python基础知识之上进行的.如想学习python基础请移步:Python开发实战系列教程-链接汇总,持续更新. 数据库增删改查操作. 我们打开Navicat 创建一个数据库Manager,并且创建一个数据表:Student 并添加初始化数据: 传统方式进行增删改查: 传统方式进行数据库的连接,可以使

avalon2学习教程01

经过难苦奋战,avalon2终于面世了.这花了大半年时间,其中1.6还胎死腹中.长达半年没有产出,我都担心自己会被裁掉…… avalon2许多API与1.4.×保持一致,当然也添加了一些1.5的功能,此外随着react的红红火火,对它的研究,也集成到此框架中. 我们先来一个简单的例子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <met

avalon2学习教程02之vm

avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象,但它大部分属性都被重写了,从而实现"操作数据即操作视图"的效果.我们在定义vm时,一般需要定义$id,其次是其他业务数据属性,它们都是来自后端的数据表.在1.4,1.5中,还有一个叫$skipArray的数组,用于方置一些只用同步一次视图的属性名,这是为了提高性能.因为将普通属性转换能同

Unity3D 学习教程 5 属性面板

小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03 添加一个点光源 点击添加完成 绿色的是Y轴  为高度 红色的是x轴  为横向 蓝色的是Z轴  为纵向 再看看属性 Local Rotation  x = 0  y = 3.18  z = 0  是坐标 Local Scale  x = 1  y

迷你MVVM框架 avalonjs 学习教程8、属性操作

属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为字符串属性,但有一些属性的是布尔,也存在是数字类型.节点引用的情况.当前jQuery处理它们就是搞了N个钩子对象,才摆平它们.avalon为了收拾它们也设置N多绑定,其中类名部分交由ms-class. ms-hover. ms-active处理,这些其他章节介绍:表单元素的value属性之前也说过,

jquery学习--属性操作

学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1").attr("xx2","xx3"); //设置属性值 但是今天突然发现jquery对象还有一个叫prop()的方法,这个prop()方法是什么来头,干什么用的?

Angular系列----AngularJS入门教程05:双向绑定(转载)

在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g