Json2Template.js基于jquery的插件将JavaScript对象绑定到Html模板中

复制代码如下： $ ('# div ')。bind template({ source : JSON Object，template 3360 null | $(' # template ')| ' div { { Object } }/div '，dateformat:' d.m.y '，tag open3360 '。BindTemplate(数据):将数据对象绑定到模板的操作方法源： json数据源模板： null不提供模板。InnerHtml输出$(“# template”)使用页面上定义的Html结构作为模板“div { {.}}/.Div”直接定义了模板dateFormat :的时间格式化模式。tagOpen :以tagClose :开始，以tag标签结束，其中dateformat、tagOpen和tagClose都可以采用默认配置为null。需要说明的是，默认的tagOpen tagClose是标记有“{{”和“}}”的Json2Template的应用。让我们通过一个小例子来看看Json2Template的简单用法，创建一个空的MVC3项目。首先，我们需要一个对象来存储传输的数据。复制代码如下：公共类userinfo { public int id { get设置；}公共字符串名称{ get设置；} public int Age { get设置；}公共字符串Address { get设置；}}虚拟化一个数据集，因为在实际的应用场景中，查询数据库得到的复制代码如下： private ilist user info init user info(){ ilist user info users=new list user info()；用户。添加(新UserInfo() { ID=1，姓名='陈坤'，年龄=21，地址='苏州' })；用户。添加(新UserInfo() { ID=2，姓名='张三'，年龄=21，地址='北京' })；用户。添加(新UserInfo() { ID=3，姓名='Lisi '，年龄=21，地址='河南' })；用户。添加(新UserInfo() { ID=4，姓名='吴王'，年龄=21，地址='上海' })；用户。添加(新UserInfo() { ID=5，姓名='刘钊'，年龄=21，地址='广州' })；用户。添加(新UserInfo() { ID=6，姓名='胡琦'，年龄=21，地址='重庆' })；返回用户；}这些基本的东西都准备好了。我们需要将这个集合序列化到json中，然后将其提供给Json2Template。这里，我将使用Newtonsoft。Json！这里我们需要定义一个Action副本代码如下： public JSON result getuser info(){ return JSON(newtonsoft . JSON . JSON convert . serializeobject(inituser info())、jsonrequestbehavior . allow get)；}将我们的集合序列化为json并启用Get请求，这样ajax就可以通过Get调用并添加对js 2 template . js的引用，然后我们将启动一个ajax请求，在后台获取json数据。然后通过绑定模板帮助获取的数据显示在HTML模板中。首先，我们定义一个简单的HTML模板：复制代码如下： div ID=' template-user info ' style=' display : none '表宽=' 100%' TRTH。序号/th姓名/th年龄/th地址/th/tr类别=' { { item } } ' TD { { id } }/TD TD TD { { name } }/TD { { age } }/TD TD TD { { address } }/TD/tr/table/div {注3336。定义到类意味着遍历一个item对象的子集类似于forearch }，然后定义一个html容器输出这个模板，复制代码如下： div id='userlist'/最后，div按照我们预先设想的方式请求json数据，并帮助模板复制代码如下： script type=' text/JavaScript ' $(document)。ready (function () {var数据源={ }；$.Ajax({ URL : '/home/getuser info '，dataType: 'json '，success:函数(数据){ dataSouce.item=JSON.parse(数据)；$('#userlist ')。bind template({ source : dataSouce，template : $(' # template-user info ')})；} });});/script F5运行查看效果。

比较简单，既然理论上还不错，推荐给大家！希望对你有所帮助。源代码： Sample.Json2Template.rar。