作者: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自然也是可行的。
分享到:
相关推荐
**Mustache.js:JavaScript模板引擎详解** Mustache.js,又称为mustache,是一款轻量级且功能强大的模板引擎,专为JavaScript设计。它遵循“逻辑less”的理念,将视图和数据分离,使得代码更易于理解和维护。...
**Mustache.js:无逻辑的JavaScript模板引擎** Mustache.js 是一个流行的开源JavaScript库,它遵循无逻辑模板语言——Mustache模板语法。这种语法强调在视图层与业务逻辑之间保持分离,使得开发者可以更专注于数据...
首先加载模板,然后用JSON格式的用户数据去渲染模板: ```javascript $.get("template.html", function(template) { var users = @Html.Raw(Json.Encode(ViewData["users"])); // 将C#数据转化为JSON var ...
在实际应用中,Mustache与JavaScript紧密配合,使用Mustache.js库可以轻松地在浏览器端渲染模板。例如,你可以创建一个HTML模板文件,然后用JavaScript加载数据,最后调用`Mustache.render()`方法将数据注入到模板中...
3. **渲染模板**:使用Mustache.js提供的`Mustache.render()`函数,将模板字符串和数据对象作为参数,得到渲染后的HTML字符串。 4. **插入到DOM**:将渲染后的HTML插入到页面适当的位置。 ### 3. 示例 假设我们有...
1. **Mustache.js**: Mustache.js 是一个 JavaScript 实现的模板库,遵循 Mustache 模板语言,它支持跨平台和多语言。模板是纯文本,可以用于生成 HTML、XML 或其他任何文本格式。 2. **无状态与逻辑less**: ...
【描述】中提到"mustache.js微模板的RequireJS/AMD加载程序插件"意味着这个项目结合了Mustache模板引擎和RequireJS的模块加载功能。在RequireJS中,我们可以创建一个插件来支持Mustache模板的加载和解析。通过这种...
**标题:** 带有Mustache.js的ASP.NET(Web表单/ MVC)中的客户端模板 **正文:** 在现代Web开发中,客户端渲染成为提高应用程序性能和用户体验的关键技术。本文将深入探讨如何在ASP.NET(包括Web窗体和MVC框架)中...
主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考...
在给定的文件中,我们看到一个基于Vue.js的简单示例,结合了Mustache模板引擎来渲染数据。这里我们将深入探讨Vue.js与Mustache模板语法以及如何将它们结合起来实现动态内容渲染。 首先,Mustache是一种无逻辑的模板...
【标题】"前端项目-oj.mustache.zip"指的是一个针对前端开发的项目,它使用了Mustache模板引擎的插件,专门针对Online Judge (OJ) 系统。这个项目的核心在于将Mustache的简洁和灵活性引入到在线编程判断系统的前端...
本文将深入探讨Mustache的基本语法,以JavaScript应用为例,帮助开发者理解和掌握这一强大的模板引擎。 一、Mustache简介 Mustache的核心理念是“logic-less”,即模板中不包含业务逻辑,仅负责展示数据。这意味着...
Mustache.js 是一个流行且开源的 JavaScript 模板引擎,源自 mustache.github.com 网站。它遵循 Mustache 模板语言的标准,这种语言是一种逻辑不可见的模板系统,也被称为“逻辑less模板”。这意味着模板中的逻辑是...
`template.js`是一款JavaScript编写的轻量级模板引擎,它允许开发者通过简洁的模板语法来实现数据和视图的绑定。 **template.js的核心概念** 1. **模板语法**:`template.js`提供了特有的模板语法,如`<% %>`用于...
一个 express 中间件,为 mustache 模板提供渲染器 使用它为每个路由器提供不同的渲染器(还允许您将模板构建为 Express 中每个路由器的子文件夹) 入门 安装模块: npm install oniyi-express-mustache-renderer ...
3. **JavaScript文件**:这里可能有一个`app.js`或者类似的名字,它负责读取数据,解析模板,并使用Mustache.js进行渲染。以下是一个简单的示例: ```javascript const express = require('express'); const ...
Handlebars.js与其他JavaScript模板引擎如Mustache.js有着类似的语法,但Handlebars提供了更丰富的块助手和更好的扩展性。在实际开发中,Handlebars.js常用于构建复杂的前端应用,尤其是那些需要动态渲染大量数据的...
1. **简洁的语法**:JSRender 使用类似于 Handlebars 或 Mustache 的双大括号语法 (`{{ }}`),使得模板代码易于阅读和编写。例如,`{{:name}}` 用于输出变量 `name` 的值。 2. **数据绑定**:通过模板表达式,你...
1. **简洁的语法**:JsRender 使用类似于Mustache的标记语言,提供易于理解和使用的模板语法。例如,`{{ }}` 用于包裹模板表达式,`{{:}}` 用于显示数据,`{{>}}` 用于嵌入子模板等。 2. **分离视图和数据**:通过...
在给定的标题"JavaScript的mustache模板引擎的一个极其快速和小的子实现"中,我们可以推断这里提到的是一个轻量级的、高效的Mustache实现,可能是针对特定场景进行了优化,例如可能去除了某些非必要的功能,以达到更...