<!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. HTML5 Canvas核心技术 图形、动画与游戏开发学习总结

    save 和 restore 函数的应用 保存canvas和恢复canvas clip函数的应用 文字的绘制 背景图片的绘制 离屏canvas 基于时间的运动

  2. sklearn的train_test_split

    train_test_split函数用于将矩阵随机划分为训练子集和测试子集,并返回划分好的训练集测试集样本和训练集测试集标签. 格式: X_train,X_test, y_train, y_test ...

  3. C语言实现数组逆置

    #include <stdio.h> #include <assert.h> void swap(int *a ,int *b) { int tmp = *a; *a = *b ...

  4. 码云+jenkins+自动回复邮件

    码云和jenkins的配置流程在Gitee Jenkins Plugin上介绍的很仔细. 附上码云官方Gitee Jenkins Plugin的介绍: https://gitee.com/help/a ...

  5. .net将List序列转为Json字符串

    将List类型转化为Json,是我们平常开发时最常见的了.在使用中,有很多种方法,也可以使用. 第一种 第三方组件:Newtonsoft.Json.dll //转化成Json Newtonsoft.J ...

  6. 3dsmax2017卸载/安装失败/如何彻底卸载清除干净3dsmax2017注册表和文件的方法

    3dsmax2017提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2017失败提示3dsmax2017安装未完成,某些产品无法安装,也有时候想重新 ...

  7. 20164324王启元 Exp4恶意代码分析

    一.实验要求 1.系统运行监控 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间并分析该文件,综述一下分析结果. 安装配置sysinternals里的sys ...

  8. ASP.NET实现数据绑定

    一.数据绑定语法 数据绑定表达式包含在“<%#”和“%>”分隔符之内,并使用Eval方法和Bind方法.Eval方法用于定义单向(只读)绑定,Bind方法用于定义双向(可更新)绑定. 语法 ...

  9. Python数据分析学习之Numpy

    Numpy的简单操作 import numpy #导入numpy包 file = numpy.genfromtxt("文件路径",delimiter=" ",d ...

  10. how to install mapr sandbox

    Sometimes we need a standalone envrionment to test Hadoop and Spark, mapr is a choice to do that in ...