mustache.js渲染带事件的模板
http://zccst.iteye.com/blog/2183111
最近遇到这样一个问题,预览内容可点击,问题是通过$.Mustache.render("templateId",data)渲染后的返回结果是一个字符串。
实现方案有两个:一个是在Backbone的events中绑定事件,一个是对返回后的String使用jQuery的$(html).find("#target").click();
方案一:在Backbone的events中绑定事件
var PreviewView = Backbone.View.extend({ events: { 'click .new_bt a' : 'demoClick', }, initialize: function(options){ this.model.bind('change:list', this.renderPreviewView, this); this.renderPreviewView(); }, renderPreviewView: function(){ this.$el.empty(); var data = this.model.toJSON(); //方法1:使用$.Mustache.render(); var html = $.Mustache.render('crownCommonKeyPreview-Pc', this.formatData(data.list)); this.$el.html(html); //方法2:使用$("#xx").mustache("",data); //this.$el.empty().mustache('crownCommonKeyPreview-Pc', this.formatData(data.list)); //方法3:使用原生的Mustache }, ... })
原理:Backbone使用的是事件代理,把html填充到el中后,el自然代理html中元素绑定的事件。
方案二:对返回后的String使用jQuery的$(html).find("#target").click();
var PreviewView = Backbone.View.extend({ events: { }, initialize: function(options){ this.model.bind('change:list', this.renderPreviewView, this); this.renderPreviewView(); }, renderPreviewView: function(){ this.$el.empty(); var data = this.model.toJSON(); //方法1:使用$.Mustache.render(); var html = $.Mustache.render('crownCommonKeyPreview-Pc', this.formatData(data.list)); this.$el.html(html); this.$el.find(".new_bt a").click(function(){alert("aaa")}); //方法2:使用$("#xx").mustache("",data); //this.$el.empty().mustache('crownCommonKeyPreview-Pc', this.formatData(data.list)); //方法3:使用原生的Mustache }, ... })
mustache.js渲染带事件的模板的更多相关文章
- mustache.js使用基本(三)
作者:zccst 本节要点是子模块(partials)和分隔符(delimiter)等 1,子模块(partials) /* {{>partials}}以>开始表示子模块,如{{> ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
- 模板引擎mustache.js
Javascript模板引擎mustache.js详解 阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...
- vue系列---Mustache.js模板引擎介绍及源码解析(十)
mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...
- 探究Javascript模板引擎mustache.js使用方法
这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...
- 使用mustache.js 模板引擎输出html
看了https://mustache.github.io/你就知道mustache是非常强大的模板引擎,支持多种语言,下面是个简单入门例子: MVC Model public class Studen ...
- 前端JS模板引擎Mustache.js的用法
Mustache.js在前端是一个非常强大的模板 Mustache用法参考
- mustache.js基本使用(一)
作者:zccst 模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因. 再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续 ...
随机推荐
- SDUT 2603:Rescue The Princess
Rescue The Princess Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 Several days ago, a b ...
- error: command 'x86_64-linux-gnu-gcc' failed with exit status 1
转载自:http://blog.csdn.net/wang1144/article/details/42277179 在ubuntu14.04版本上安装lxml,老是出错,在一番艰辛的搜索之后 ,终于 ...
- ssh 配置自动登录
假定 机器A 连接至 机器B . 1. 在机器A上,生成RSA秘钥对 ssh-keygen -t rsa 期间passphrase不输入密码.默认生成文件至 ~/.ssh/ -rw------- we ...
- 配置 ASP.NET Linux( CentOS 6.5 ) 运行环境 MONO + Jexus
1.更新系统 在命令行下执行 yum –y update 2.安装必要的软件 yum -y install gcc gcc-c++ bison pkgconfig glib2-devel gettex ...
- C语言中'\0'与'\n'
'\0'表示ASCII编号为0的字符,在C语言中最常用于代表字符串结束的标志.'\n'表示ASCII编号为13的字符,代表回车键,输出这个字符就会换一行. '\0'作为字符串的结束标志,本身会占用一个 ...
- 查看C语言的方法名
1,打开 Visual Studio 2008 x64 Win64 命令提示 2,查看dumpbin –exports [C动态库的路径]
- Python串口编程
python的串口网上有很多例子,这里了只是把认为好的整理到一起. 首先,应该安装serial模块,还能开始后续的操作.我用的python2.6,serial模块可以在这里下载安装serial模块下载 ...
- MySQL做练习时总结的一些知识点
MySQL做练习时总结的一些知识点 0:mysql有三种注释方法 上午插入记录的时候一直没有成功,郁闷不知道为什么.因为是很多条记录一起插入,中间一些不用的数据就用"--" ...
- ASP.NET四则运算--工厂模式
这次是在ASP.NET上实现四则运算,之前用策略模式实现了,所以这次想着用工厂模式实现一下. Calculator.cs using System; using System.Collections. ...
- Java开发中经典的小实例-(if(参数){}else{})
import java.util.Scanner; public class Calculate { public static void main(String[] args) { ...