码迷,mamicode.com
首页 > Web开发 > 详细

一个简单的knockout.js 和easyui的绑定

时间:2017-03-28 00:09:37      阅读:320      评论:0      收藏:0      [点我收藏+]

标签:html   date   title   update   ble   sheet   tle   href   name   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="knockout-2.2.1.js"></script>

<script type="text/javascript">
//预编译函数, 可以定义在另一个js文件中
(function(){
//自定义绑定
ko.bindingHandlers.mydatagrid={
update:function (element, viewModelAccessor, allBindings) {
//得到当前绑定的model
var viewModel = viewModelAccessor();
$(element).datagrid({
url:viewModel.url,
columns:viewmodel.columns
})
}
}

})();
</script>

</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div>

<table id="tt" title="Basic DataGrid" style="width:700px;height:250px" data-bind="mydatagrid:grid">
</table>

<script type="text/javascript">
var viewmodel = function() {
this.grid={
url:‘mydata.json‘, 
columns:[
{field:‘code‘,title:‘Code‘,width:100}, 
{field:‘name‘,title:‘Name‘,width:100}, 
{field:‘price‘,title:‘Price‘,width:100,align:‘right‘}

}
};
ko.applyBindings(new viewmodel());

<!--easyui的写法
$(‘#tt‘).datagrid({ 
url:‘mydata.json‘, <!--跨域请求 在chrome的快捷方式上添加 --allow-file-access-from-files --> 
columns:[[ 
{field:‘code‘,title:‘Code‘,width:100}, 
{field:‘name‘,title:‘Name‘,width:100}, 
{field:‘price‘,title:‘Price‘,width:100,align:‘right‘} 
]] 
}); 
-->

</script>
</body>
</html>

一个简单的knockout.js 和easyui的绑定

标签:html   date   title   update   ble   sheet   tle   href   name   

原文地址:http://www.cnblogs.com/amylis_chen/p/6629432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!