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

            var vm = avalon.define({
$id: "test",
title:111,
src: "222",
lang: 333
})
{{
@src ? 333: 'empty'
}}

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

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

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

  1. avalon2学习教程06样式操作

    avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Obj ...

  2. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

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

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  4. avalon2学习教程08插入移除操作

    本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1 ...

  5. avalon2学习教程15指令总结

    avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...

  6. avalon2学习教程13组件使用

    avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优 ...

  7. avalon2学习教程09循环操作

    avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...

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

    各位志同道合的同仁可以点击上方关注↑↑↑↑↑↑ 本教程致力于程序员快速掌握Python语言编程. 本文章内容是基于上次课程Python教程:Python教程:连接数据库,对数据进行增删改查操作 和py ...

  9. avalon2学习教程02之vm

    avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象 ...

随机推荐

  1. Centos 6.5(64位) vim 8.0 安装

    转自:https://blog.csdn.net/sdoyuxuan/article/details/78825912 1 先得安装nurses库 yum list | grep "ncur ...

  2. webpack入门详解

    webpack入门详解(基于webpack 3.5.4  2017-8-22) webpack常用命令: webpack --display-error-details    //执行打包 webpa ...

  3. $.extend与$.fn.extend()

    很多情况下,用户需要对jQuery插件进行二次开发,那么我们来看看JQ原开发者为我们提供的两种扩展插件的方式如下: 1.类别类:相当于为jquery扩展一个类,比如现在我要扩展一个简单的想加的功能函数 ...

  4. python 实现排序算法(二)-合并排序(递归法)

    #!/usr/bin/env python2 # -*- coding: utf-8 -*- """ Created on Tue Nov 21 22:28:09 201 ...

  5. Java 8- Java 分支结构 - if…else/switch

    Java 分支结构 - if...else/switch 顺序结构只能顺序执行,不能进行判断和选择,因此需要分支结构. Java有两种分支结构: if语句 switch语句 if语句 一个if语句包含 ...

  6. centos下部署启动elasticsearch错误集合与解决方案

    问题一: max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144] 解决步 ...

  7. Docker使用札记 - 使用中遇到的问题总结

    1. 启动容器时报错误“: No such file or directory” 一般来说作为容器应用的入口都是entrypoint.sh文件,也就是Dockerfile最后一条指令为是: ENTRY ...

  8. mysql中的sql_mode

    mysql数据库的中有一个环境变量sql_mode,定义了mysql应该支持的sql语法,数据校验等!我们可以通过以下方式查看当前数据库使用的sql_mode: mysql> select @@ ...

  9. Django之视图Views

    视图 视图接受Web请求并且返回Web响应 视图就是一个python函数,被定义在views.py中 响应可以是一张网页的HTML内容,一个重定向,一个404错误等等 响应处理过程如下图: URLco ...

  10. 28.Mongodb问题解决

    mongodb问题配置解决: 之前官网下载msi文件安装总是出现问题,这次使用zip压缩包直接解压使用(较为省力). 链接:https://pan.baidu.com/s/1G-jh7CXD1gCz8 ...