<!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. 爬虫防封IP

    当抓取数据逐渐增大时,服务器的负荷会加大,会直接封掉来访IP: 采取措施: 1.创建请求头部信息: headers = {'User-Agent': 'Mozilla/5.0 (Windows NT ...

  2. TX2 五种功耗模式

    工作模式介绍 Jetson TX2由一个GPU和一个CPU集群组成,CPU集群由双核丹佛2处理器和四核ARM Cortex-A57组成,通过高性能互连架构连接. 拥有6个CPU核心和一个GPU,您可以 ...

  3. C# 反射(Reflection)技术

    本文参考自C#反射(Reflection)详解,纯属学习笔记,加深记忆 在介绍反射前,先介绍一个重要的知识点         .Net应用程序是由程序集(Assembly).模块(Module).类型 ...

  4. Cloudera Manager安装之Cloudera Manager 5.6.X安装（tar方式、rpm方式和yum方式） （Ubuntu14.04） （三）

    见 Ubuntu14.04下完美安装cloudermanage多种方式(图文详解)(博主推荐) 欢迎大家,加入我的微信公众号:大数据躺过的坑     免费给分享       同时,大家可以关注我的个人 ...

  5. jsp模板添加URL定位语句

    html的head头中加入以下语句,方便url链接诶编写定位 <base href="${pageContext.request.scheme}://${pageContext.req ...

  6. nginx内网代理为外网地址

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  7. Java线程池——ThreadPoolExecutor的使用

    1 线程池的创建 ThreadPoolExecutor有以下四个构造方法 ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long  ...

  8. div+css 让一个小div在另一个大div里面 垂直居中

    方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800px;           height:500px;       ...

  9. ASP.NET Core项目中新增和删除的内容

    最新一版的.NET几经改名,最终得到了.NET Core这个高大上的名称,相应的ASP.NET MVC也跟着提供了ASP.NET Core MVC版本. 在.NET Core没有稳定名称时,叫做MVC ...

  10. mysql 远程链接问题

    问题描述: 从一台linux远程连接另一台linux上的MySQL, 出现ERROR 2003 (HY000): Can't connect to MySQL server on 'xxx.xxx.x ...