<!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. 循环神经网络RNN原理

    一.循环神经网络简介 循环神经网络,英文全称:Recurrent Neural Network,或简单记为RNN.需要注意的是,递归神经网络(Recursive Neural Network)的简写也 ...

  2. 题目1010：A + B(字符串拆分)

    问题来源 http://ac.jobdu.com/problem.php?pid=1010 问题描述 给我们一行标准的字符串,整行读入之后,把它拆开转换成数字进行计算. 问题分析 首先考虑一个问题:如 ...

  3. (C/C++) 亂數應用

    因為公司需要寫了一個亂數產生測試條件的小程式,再此紀錄下來 int _tmain(int argc, _TCHAR* argv[]) { fstream file; file.open("t ...

  4. centos文件查找命令

    在使用linux时,经常需要进行文件查找.其中查找的命令主要有find和grep.两个命令是有区的. 区别:(1)find命令是根据文件的属性进行查找,如文件名,文件大小,所有者,所属组,是否为空,访 ...

  5. TestGc finalize()

    package com.gc; public class TestGc { public static void main(String[] args) { Man man = new Man(&qu ...

  6. C 和 C++ 字符串函数操作

    1)字符串操作  strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长 ...

  7. JS之作用域与闭包

    JS之作用域与闭包   作用域在JS中同样也是一个重要的概念.它不复杂,因为ES5中只有全局作用域和函数作用域,我们都知道他没有块级作用域.但在ES6中多了一个let,他可以保证外层块不受内层块的影响 ...

  8. 手写css按钮组

    css: .lf{float:left} .btn{ width:60px; height:24px; color:#fff; border-radius:4px; cursor:pointer; b ...

  9. EntityFramework6 版本更变产生的错误

    LINQ to Entities does not recognize the method 'System.Nullable`1[System.Int32] DiffMinutes(System.N ...

  10. jquery metadata 详解

    1.0的版本是这样的$.meta 2.0的版本是这样的$.metadata 很多插件的编写都用到了这个插件,个人感觉这个东西应该是jquery官方的.推荐使用2.0的版本, 因为现在官方上就是2.0的 ...