`
zccst
  • 浏览: 3315558 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

mustache.js渲染带事件的模板

阅读更多
作者: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:JavaScript模板引擎详解** Mustache.js,又称为mustache,是一款轻量级且功能强大的模板引擎,专为JavaScript设计。它遵循“逻辑less”的理念,将视图和数据分离,使得代码更易于理解和维护。...

    前端项目-mustache.js.zip

    **Mustache.js:无逻辑的JavaScript模板引擎** Mustache.js 是一个流行的开源JavaScript库,它遵循无逻辑模板语言——Mustache模板语法。这种语法强调在视图层与业务逻辑之间保持分离,使得开发者可以更专注于数据...

    使用Mustache.js实现的asp.net mvc客户端模版的例子

    首先加载模板,然后用JSON格式的用户数据去渲染模板: ```javascript $.get("template.html", function(template) { var users = @Html.Raw(Json.Encode(ViewData["users"])); // 将C#数据转化为JSON var ...

    前端模板引擎Mustache教程.zip

    在实际应用中,Mustache与JavaScript紧密配合,使用Mustache.js库可以轻松地在浏览器端渲染模板。例如,你可以创建一个HTML模板文件,然后用JavaScript加载数据,最后调用`Mustache.render()`方法将数据注入到模板中...

    详解Javascript模板引擎mustache.js

    3. **渲染模板**:使用Mustache.js提供的`Mustache.render()`函数,将模板字符串和数据对象作为参数,得到渲染后的HTML字符串。 4. **插入到DOM**:将渲染后的HTML插入到页面适当的位置。 ### 3. 示例 假设我们有...

    mustache_test:只是测试 mustache.js 库

    1. **Mustache.js**: Mustache.js 是一个 JavaScript 实现的模板库,遵循 Mustache 模板语言,它支持跨平台和多语言。模板是纯文本,可以用于生成 HTML、XML 或其他任何文本格式。 2. **无状态与逻辑less**: ...

    前端项目-requirejs-mustache.zip

    【描述】中提到"mustache.js微模板的RequireJS/AMD加载程序插件"意味着这个项目结合了Mustache模板引擎和RequireJS的模块加载功能。在RequireJS中,我们可以创建一个插件来支持Mustache模板的加载和解析。通过这种...

    带有Mustache.js的ASP.NET(Web表单/ MVC)中的客户端模板

    **标题:** 带有Mustache.js的ASP.NET(Web表单/ MVC)中的客户端模板 **正文:** 在现代Web开发中,客户端渲染成为提高应用程序性能和用户体验的关键技术。本文将深入探讨如何在ASP.NET(包括Web窗体和MVC框架)中...

    探究Javascript模板引擎mustache.js使用方法

    主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考...

    mustache.pdf

    在给定的文件中,我们看到一个基于Vue.js的简单示例,结合了Mustache模板引擎来渲染数据。这里我们将深入探讨Vue.js与Mustache模板语法以及如何将它们结合起来实现动态内容渲染。 首先,Mustache是一种无逻辑的模板...

    前端项目-oj.mustache.zip

    【标题】"前端项目-oj.mustache.zip"指的是一个针对前端开发的项目,它使用了Mustache模板引擎的插件,专门针对Online Judge (OJ) 系统。这个项目的核心在于将Mustache的简洁和灵活性引入到在线编程判断系统的前端...

    Mustache模板语法教程

    本文将深入探讨Mustache的基本语法,以JavaScript应用为例,帮助开发者理解和掌握这一强大的模板引擎。 一、Mustache简介 Mustache的核心理念是“logic-less”,即模板中不包含业务逻辑,仅负责展示数据。这意味着...

    mustache.github.com:{{official}}网站

    Mustache.js 是一个流行且开源的 JavaScript 模板引擎,源自 mustache.github.com 网站。它遵循 Mustache 模板语言的标准,这种语言是一种逻辑不可见的模板系统,也被称为“逻辑less模板”。这意味着模板中的逻辑是...

    template.js模板

    `template.js`是一款JavaScript编写的轻量级模板引擎,它允许开发者通过简洁的模板语法来实现数据和视图的绑定。 **template.js的核心概念** 1. **模板语法**:`template.js`提供了特有的模板语法,如`<% %>`用于...

    oniyi-express-mustache-renderer:为 mustache 模板提供渲染器的快速中间件

    一个 express 中间件,为 mustache 模板提供渲染器 使用它为每个路由器提供不同的渲染器(还允许您将模板构建为 Express 中每个路由器的子文件夹) 入门 安装模块: npm install oniyi-express-mustache-renderer ...

    mustache-js-examples:如何使用 mustache js 的示例

    3. **JavaScript文件**:这里可能有一个`app.js`或者类似的名字,它负责读取数据,解析模板,并使用Mustache.js进行渲染。以下是一个简单的示例: ```javascript const express = require('express'); const ...

    Javascript模版引擎Handlebars.js源文件与示例

    Handlebars.js与其他JavaScript模板引擎如Mustache.js有着类似的语法,但Handlebars提供了更丰富的块助手和更好的扩展性。在实际开发中,Handlebars.js常用于构建复杂的前端应用,尤其是那些需要动态渲染大量数据的...

    jquery-jsrender.js

    1. **简洁的语法**:JSRender 使用类似于 Handlebars 或 Mustache 的双大括号语法 (`{{ }}`),使得模板代码易于阅读和编写。例如,`{{:name}}` 用于输出变量 `name` 的值。 2. **数据绑定**:通过模板表达式,你...

    JsRender.zip(jsrender.js和jsrender.min.js合集)

    1. **简洁的语法**:JsRender 使用类似于Mustache的标记语言,提供易于理解和使用的模板语法。例如,`{{ }}` 用于包裹模板表达式,`{{:}}` 用于显示数据,`{{>}}` 用于嵌入子模板等。 2. **分离视图和数据**:通过...

    JavaScript的mustache模板引擎的一个极其快速和小的子实现

    在给定的标题"JavaScript的mustache模板引擎的一个极其快速和小的子实现"中,我们可以推断这里提到的是一个轻量级的、高效的Mustache实现,可能是针对特定场景进行了优化,例如可能去除了某些非必要的功能,以达到更...

Global site tag (gtag.js) - Google Analytics