作者:zccst
最近遇到这样一个问题,预览内容可点击,问题是通过$.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
},
...
})
原理:与上面一样。
直接加也是,元素先加到el中,先后再用jQuery的$("").find().click自然也是可行的。
分享到:
相关推荐
主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考...
一个 express 中间件,为 mustache 模板提供渲染器 使用它为每个路由器提供不同的渲染器(还允许您将模板构建为 Express 中每个路由器的子文件夹) 入门 安装模块: npm install oniyi-express-mustache-renderer ...
template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。https://github.com/aui/artTemplate 1、特性 ...
测验 这是我创建的一个简单的测验应用程序,作为使用 Backbone.js 的练习。 代码被分成模型和视图,并使用模板引擎 mustache 进行渲染。 测验问题是使用主干的 RESTful API 功能从 json 文件加载的。
小胡子模板渲染 如何在Alosaur中使用渲染器 import { renderFile } from 'https://deno.land/x/mustache/mod.ts' ; app . useViewRender ( { type : 'mustache' , basePath : ` ${ Deno . cwd ( ) } /views/` , //...
在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。 除了性能优势外,调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句,解决了编写模板过程中无法调试的痛苦...
例子要呈现胡子模板(包括任何部分),您可以使用相对于模板目录(带有或不.mustache扩展名)的模板的字符串名称。 var beardo = require('../')var dir = './templates'var template = beardo(dir)var context = { ...
最近工作内容慢慢接近我的理想化(web...doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 3. jSmart jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本。 4. dom.js dom.js 是一款可用在客户
Vue预习课 核心知识03——模板语法 Vue模板语法 插值文本 特性 列表渲染 表单输入绑定 事件处理 class与style绑定 计算属性和监听器 ...数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 使用“Mustache”语法 (即...
几个特点: 与以前一样在控制器中渲染模板的用法。 渲染时永远不需要管理部分和布局变量。 兼容所有基于 mustache 的模板引擎。安装 $ npm install --save mustlayout用法在您的快速应用程序主文件app.js : var ...
通过 mustache 解析它(有一个小的变化来处理绑定到数组) 使用 dojo 呈现它 通过 setter 和 getter 将 dom 绑定到类属性 连接 dojo 细节,例如 attachpoint 和 attachevent 当给定的属性更改时,部分重新渲染所需...
要求可以渲染器 CanJS 查看 Require.js 的渲染器 安装 $ npm install require-can-renderers --save 将路径添加到您的 requirejs 配置: ...这将支持在开发环境中加载模板并使用 r.js 优化器编译它们。
您可以使用您选择的任何 javascript 模板库(handlebars.js、mustache.js、dust.js 就是其中的一些)。 json 文件可以托管在任何 HTTP 服务器上。 javscript 代码必须写得很好(见下面提到的要点) 可读和模块化小...
{{schnauzer.js}}-(几乎)带有JavaScript的无逻辑模板 Schanuzer与Moustache和Handlebars模板基本兼容。 在大多数情况下,可以用Schanuzer替换掉Moustache或Handlebars并继续使用当前模板。 Schanuzer也非常小而...
jQuery 雪佛龙 jQuery Chevron 是一个 jQuery 扩展,它包装了 mustache js ... 然后,为了渲染模板: $ ( "#templateName" ) . Chevron ( "render" , { place : "world" } , function ( result ) { // do somet
大口薄荷糖渲染应在 Minstache上报告输出。安装 $ npm install --save-dev gulp-minstache用法src/greeting.html < h1> Hello {{name}} </ h1>gulpfile.js var gulp = require ( 'gulp' ) ;var template = require ...
Pup Tent是用于模板(Mustache)的毫微微框架,并用于Node.js和RingoJS(beta)Web应用程序的静态内容交付。 这样做的目的是快速将一堆相关的JS,模板,CSS和静态文件转换为足够连贯的整体,以提供适当的Web应用...
该模板需要一个支持和声标志的节点版本,这是无论如何使用 koa.js 的先决条件。 好处: 默认的 React 页面是服务器渲染的,以提高首页加载性能和 SEO。 使用 Mustache 使用模板来托管 React 组件。 Livereload ...
配置文件连接代码示例这是我在 Sprout 期间构建的功能(称为“Profile Connect”)的代码示例。 它结合了后端 API 功能、驱动用户交互 + 与 API ... 使用 Mustache 构建并使用 Hogan.js 渲染。网络连接.css Profile Con