有个项目前端想使用流行的mvc框架来开发,调研了下，感觉backbone.js比较合适..mvc划分清晰.使用方便。为了开发进度，前端富客户端使用easyui来搭建,这样就出现了backbone和easyui如果结合使用的问题..经过几天的调研，在同事的帮助下，终于能够不完美的结合使用了..后续再修改、优化..
html页面：
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-model</title>
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="backbone/Underscore.js" type="text/javascript"></script>
<script src="backbone/Backbone.js" type="text/javascript"></script>
<script src="js/t.js" type="text/javascript"></script>
</head>
<body>
<div id="placeholder"></div>
<!-- backbone 的templete -->
<script type="text/html" id="layout-template">
<table id="tbList" cellspacing="0" cellpadding="0">
</table>
</script>
</body>
</html>
t.js代码
$(document).ready(function() {
// Model var Person = Backbone.Model.extend({});
// Collection var PersonCollection = Backbone.Collection.extend({ mondel:Person,
// Test是个servlet，返回json测试数据 url:"Test" }); var PersonView = Backbone.View.extend({
//View对应到dom el: $("#placeholder"), dg:null, p:null, initialize: function() { p = new PersonCollection(); p.bind('reset', this.addAll, this); p.fetch({silent: true,reset:true, success:function(collection,response){ collection.reset(collection.models); }}); }, render: function(){ var template = $("#layout-template").html(); var content = _.template(template, {}); this.$el.append(content); this.dg = this.$el.find('#tbList').datagrid({ title :"easyui-datagrid列表", height:"auto", singleSelect:false,//是否单选 pagination:true,//分页控件 rownumbers:true,//行号 columns:[[ {field:'f1',title:'姓名',100}, {field:'f2',title:'年龄',100}, {field:'f3',title:'备注',100,formatter:function(dgg,row,is) { return "Hello,World!!"; }} ]], toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function() { openDialog("add_dialog","add"); } }] }); }, addAll:function(persons) { var self = this; persons.each(function(person){ self.dg.datagrid("insertRow",{row:person.attributes}); }); } }); var personView = new PersonView();
// 渲染 personView.render(); });
效果图：
待续....