<!DOCTYPE html>

<html>

<head>

    <title>项目</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

<style>
.ms-controller{
visibility: hidden;  /*防止出现{{x}}等插值表达式*/
}
</style>

</head>

<body>

    <div ms-controller="indexController"  class="ms-controller">

        <p>-----------------------变量------------------------------</p>

        <div>

            <span>{{@x}}</span>

        </div>

        <p>-----------------------集合------------------------------</p>

        <ul><li ms-attr="{myAttr:el.a}" ms ms-for="el in @list" onclick="doClick(this)">{{el.a}}</li></ul>  <!--自定义属性ms-attr-->

    </div>

    <script src="avalon2.js"></script>

    <script>

        var vm = avalon.define({

            $id: "indexController",

            x: 100,

            list: [{ "a": "aa" }, { "a": "aa" }, { "a": "aa" }]

        });

function doClick(liObj)
{ alert(liObj.attributes["myAttr"].value);}

setTimeout(function () { vm.x = 19;},3000);

</script>

</body>

</html>

img图片src

<img ms-for="el in @issueDetailInfo.ImgList" ms-attr="{src:'../../../'+el}" data-preview-src="" data-preview-group="1" />

<div   ms-if="el.type==0">if内容</div>

ms-click调用方法参数插值:

<ul><li ms-attr="{myAttr:el.a}" ms-for="el in @list" ms-on-click="@myClick(el.a)">{{el.a}}</li></ul> <!--ms-click 方法参数插值-->

var vm = avalon.define({
$id: "indexController",
x: 100,
list: [{ "a": "aa" }, { "a": "aa" }, { "a": "aa" }],
myClick: function (str) {
alert(str);
}
});

From:http://www.cnblogs.com/xuejianxiyang/p/6434402.html

avalon2简单数据绑定(自定义属性绑定)的更多相关文章

  1. Winform开发常用控件之DataGridView的简单数据绑定——自动绑定

    DataGridView控件可谓是Winform开发的重点控件,对于数据的呈现和操作非常方便,DataGridView可谓是既简单又复杂.简单在于其已经集成了很多方法,复杂在于可以使用其实现复杂的数据 ...

  2. Winform开发常用控件之DataGridView的简单数据绑定——代码绑定DataSet、DataTable、IList、SqlDataReader

    前文介绍了Winform为DataGridView提供的数据自动绑定功能,下面介绍一下采用代码的数据绑定 1.用DataSet和DataTable为DataGridView提供数据源 先上代码 pri ...

  3. 【翻译】使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定

    原文地址:http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Fo ...

  4. Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定

    使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定   原文地址:http://www.dotnetjalps.com/2013/05/Simple-da ...

  5. JavaScript实现简单的双向绑定

    很多的前端框架都支持数据双向绑定了,最近正好在看双向绑定的实现,就用Javascript写了几个简单的例子. 几个例子中尝试使用了下面的方式实现双向绑定: 发布/订阅模式 属性劫持 脏数据检测 发布/ ...

  6. WPF自定义控件的自定义属性绑定后不更新问题

    原文:WPF自定义控件的自定义属性绑定后不更新问题 需要在绑定时设置属性变更触发 UpdateSourceTrigger=PropertyChanged 例如: <Border CornerRa ...

  7. springMVC使用@RequestParam用于处理简单类型的绑定

    使用@RequestParam常用于处理简单类型的绑定. value:参数名字,即入参的请求参数名字,如value=“item_id”表示请求的参数区中的名字为item_id的参数的值将传入: req ...

  8. 最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理

    废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...

  9. .NET CORE(C#) WPF简单菜单MVVM绑定

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF简单菜单MVVM绑定 阅读导航 本文背景 代码实现 本文参考 ...

随机推荐

  1. 01Trie树 CF923C Perfect Security

    CF923C Perfect Security 上下各n个数,求一种排列p,使上面的数i异或pi成为新的数i,求方案另字典序最小,输出该结果 01Trie树. 记录每个节点经过多少次. 每一次查询的时 ...

  2. javascript 动态脚本添加

    异步加载js文件或者异步加载js模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createScript方法用于创建一个script标签并添加到body标签中 2.create ...

  3. centos的基本命令02

    16:查看系统运行的进程 ps -ef 17:查看系统已开放的端口 netstat -tunlp 18:管道命令 ps -ef | grep tom # 查看系统中与tom相关的进程 19:grep过 ...

  4. 网络基础 01_OSI网际互联

    1 通信概述 网络是用物理链路将各个孤立的工作站或主机相连在一起,组成数据链路,从而达到资源共享和通信的目的. 通信是人与人之间通过某种媒体进行的信息交流与传递. 网络通信是通过网络将各个孤立的设备进 ...

  5. 洛谷 P3227 [HNOI2013]切糕（最小割）

    题解 Dinic求最小割 题目其实就是求最小的代价使得每个纵轴被分成两部分 最小割!!! 我们把每个点抽象成一条边,一个纵轴就是一条\(S-T\)的路径 但是题目要求\(|f(x,y)-f(x',y' ...

  6. Codeforces - 331B2 权值线段树 区间合并

    题意:题目太玄了我无法用语言精简.. 题目要求的操作1是基于值的,所以用普通线段树基本无法维护(反正我不知道) 换做权值型后十分好做,因为连接处必然是更后面的,这时比较一下位置就好 PS.感觉周赛越来 ...

  7. js获取窗口宽度、高度

    1.获取屏幕的高度和宽度(屏幕分辨率): window.screen.height window.screen.width 2.获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen ...

  8. python yield、yield from与协程

    从生成器到协程 协程是指一个过程,这个过程与调用方协作,产出由调用方提供的值.生成器的调用方可以使用 .send(...)方法发送数据,发送的数据会成为yield表达式的值.因此,生成器可以作为协程使 ...

  9. unity+Helios制作360°全景VR视频

    unity版本  unity2017.2.0 Helios版本:Helios 1.3.6 ffmpeg:ffmpeg-20180909-404d21f-win64-static(地址:https:// ...

  10. 10g 升级到11g 失效对象2则

    ########SAMPLE 0 Invalid X_$ Views & Synonyms After Upgrading to 11g (文档 ID 878623.1) Those view ...