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. 2017.7月(关于vertical-align等)

    1.Jquery 可以使用$('.class',$object)的形式,$object是jQuery对象,在该对象的子元素中查找'.class' 2.line的问题,input和button作为inl ...

  2. orcale 函数wm_concat不存咋lob值使用zh_concat 替换

    create or replace TYPE zh_concat_im AUTHID CURRENT_USER AS OBJECT ( CURR_STR VARCHAR2(32767), STATIC ...

  3. 00006 - Linux中使用export命令设置环境变量

    功能说明:设置或显示环境变量. #################################################################################### ...

  4. adversarial example研究

    Paper: Practical Black-Box Attacks against Machine Learning 一.介绍 概况:Ian Goodfellow大神研究如何在不知道model内部结 ...

  5. 阿里云发送短信验证码php_SDK

    1.登录阿里云账号下载——aliyun-dysms-php-sdk(我使用的php版本) 下载地址:https://help.aliyun.com/document_detail/55359.html ...

  6. python-ddt 数据驱动测试

    # @File : learn_ddt.py #-*- coding:utf-8 -*- #本次学习:ddt ---data drive test--数据驱动测试 #1.安装 pip install ...

  7. 傅立叶变换系列(五)快速傅立叶变换(FFT)

    说明: 傅里叶级数.傅里叶变换.离散傅里叶变换.短时傅里叶变换...这些理解和应用都非常难,网上的文章有两个极端:“Esay”  Or  “Boring”!如果单独看一两篇文章就弄懂傅里叶,那说明你真 ...

  8. [Unity插件]AI行为树使用总结

    参考链接: https://blog.csdn.net/linxinfa/article/details/72937709 https://blog.csdn.net/wanghaodiablo/ar ...

  9. fabric-ca1.03安装

    前面的文档已经成功的安装了fabric1.0.1的e2e例子.之后代码换成1.0.3版本按步骤重新安装一下,就可以切换到1.0.3了.1.0.3的脚本和启动命令没有变化,还是用的1.0.1的. 1.准 ...

  10. nodejs基础学习1

    ES6常用新语法 ES6新语法 什么是ES6? 由于JavaScript是上个世纪90年代,由Brendan Eich在用了10天左右的时间发明的:虽然语言的设计者很牛逼,但是也扛不住"时间 ...