首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法在Backbone/Marionette中重新渲染任何自定义JQuery事件的子视图?

在Backbone/Marionette中重新渲染任何自定义jQuery事件的子视图是有办法的。当子视图中的自定义jQuery事件需要重新渲染时,可以通过以下步骤实现:

  1. 在子视图中定义自定义jQuery事件,并确保事件绑定正确。
  2. 在需要重新渲染子视图的地方,调用子视图的render方法。
  3. 在子视图的render方法中,首先解绑之前绑定的自定义jQuery事件,然后重新渲染子视图的内容。
  4. 在重新渲染完成后,重新绑定自定义jQuery事件。

下面是一个示例代码:

代码语言:txt
复制
var CustomView = Backbone.View.extend({
  events: {
    'click .custom-button': 'customEvent'
  },
  
  render: function() {
    // 解绑自定义jQuery事件
    this.undelegateEvents();
    
    // 重新渲染子视图内容
    this.$el.html('<button class="custom-button">Click me</button>');
    
    // 重新绑定自定义jQuery事件
    this.delegateEvents();
    
    return this;
  },
  
  customEvent: function() {
    // 处理自定义事件的逻辑
  }
});

var ParentView = Backbone.View.extend({
  render: function() {
    // 创建子视图实例
    var customView = new CustomView();
    
    // 渲染子视图
    this.$el.append(customView.render().el);
    
    return this;
  }
});

var parentView = new ParentView();
parentView.render();

在上述示例中,CustomView是一个子视图,其中定义了一个自定义的jQuery事件customEvent。在CustomViewrender方法中,首先解绑之前绑定的自定义jQuery事件,然后重新渲染子视图的内容,并最后重新绑定自定义jQuery事件。在ParentView中,创建了CustomView的实例,并将其渲染到父视图中。

这样,当需要重新渲染子视图时,只需要调用子视图的render方法即可重新渲染子视图的内容,并保持自定义jQuery事件的绑定。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

多种前端框架优缺点「建议收藏」

速度快:UI渲染过程,React通过虚拟DOM微操作来实现对实际DOM局部更新。 2....其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序。...Ember.js,路由用作模型,句柄模板作为视图,控制器处理模型数据。...,即更改了哪个组件渲染哪个 会重新渲染全部组件 方式 利用数据双向绑定,模板式开发。...状态 Vue数据是可变(mutated),改变数据,页面就会重新渲染更新。(Vue改变状态操作不仅更加简洁,而且它重新渲染系统实际上比React更快更高效。)

3.6K20

10个最受欢迎 JavaScript 框架,以及它们主要特征和功能

双向数据绑定过程视图会显示模型中所做更改,反过来模型反映了视图中所做更改。 单页应用:使用 AngularJS 框架,你可以构建完全响应式单页应用,可以轻松完美地适应不同屏幕尺寸。...你也可以使用 HTML 语法来渲染组件,或使用老式 JavaScript 编写,这意味着无论采用哪种方式,你都可以灵活地进行编码。...Backbone.js 通过视图和模型之间提供事件驱动通信来克服这个问题。 更少代码:约定是引入通用编码风格好方法,而无需提供大量编码标准。...这些组件是浏览器一部分,所以你不需要任何第三方工具和库,比如 jQuery。 单向和双向数据绑定:它提供单向和双向数据绑定。Polymer 旨在支持单向和双向流动数据。...可扩展 HTML:Aurelia 可扩展 HTML 编译器允许你创建自定义 HTML 元素,可以向现有元素添加自定义属性并控制模板生成,所有这些都完全支持动态加载、数据绑定和高性能批量渲染

3.7K10

一个简单粗暴前后端分离方案

之前也有看过淘宝团队实践,利用nodejs做一个中间层,处理页面渲染、路由控制、SEO等事情,将前后端分界线进行了重新定义。...每个模块给一个命名空间,所有的方法都挂在上面,js文件只做函数定义,不立即执行任何东西,然后html文件调用入口方法:publish.init()。...页面的事件监听器统一都注册body元素上,用事件代理来完成,为了避免写太多on、click之类代码,为jQuery扩展了一个delegates方法,用来以配置方式统一绑定监听器,用法如上所示。...路由控制 如上面所述,jQuery$.load()方法可以满足加载页面的需求,现在需要解决问题是,不管用户刷新页面还是前进后退,我们都得根据hash值来渲染对应视图,其实就是路由控制。...总之自定义helper很强大,可以完成你所需任何逻辑。 数据格式化,如日期、数字等,也可以通过helper来完成。

1.5K10

浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

el指向对应视图dom元素,用是css选择器,View可以使用this.$el获取到这个jquery风格变量。render是自定义函数。 到这里,运行程序,就能看到module1效果了。...fetch是自定义方法,模拟http请求,这是很常规做法了,不过这个例子没使用backbonerest化接口。..., events: { 'click button': 'clickSpan' //使用代理监听交互,好处是界面即使重新rander了,事件还能触发,不需要重新绑定...先让view用默认数据渲染,再让model去拉取最新数据,最后通过事件机制更新界面。 当然,这个controller并不是backbone规范,大家可以尽情发挥。...按这个方案,实际开发,多人经常会在router这个节骨眼上打架,这里配置化还不够完美。

2.4K40

前端状态管理设计——优雅与妥协艺术

jquery只针对DOM事件系统,而backbone可以脱离DOM,对数据变化进行监听。...当数据变化被监听之后,就可以监听函数对view进行修改,而对于事件响应,只需要调用set方法修改数据。这样就做到了数据和界面代码分离解耦,是一大进步。但backbone也止步于此。...如果写过php应用,大部分php框架都会有模型层,而在编写模型时,强调,都是只进行数据读写和计算,而不处理任何视图东西,处理视图东西,需要在控制器读取模型上数据,自己进行组装。...不过,vue组件定义不仅仅包含这些东西,同时还有生命周期函数,组件引用,props,视图事件回调函数等等东西,而这些东西整体,又是为视图编程服务,因此,最终它和模型也只是插肩而过。...,遇到对应交互事件之后,调用模型上方法去驱动模型状态变化,然后返回来又更新自己。

1.4K20

用 jest 单元测试改善老旧 Backbone.js 项目

对于这样既有项目,之前文章也进行过分析,常常面临依赖不清、封装混乱,以及缺乏测试等问题;对之进行维护和新需求开发时,结合其本身特点, TDD 方式下进行渐进改善,而非推倒重来,无疑是个可行办法...、绑定事件视图组件 我们实际项目中,视图层同时支持了 Backbone.View 和早期 react@13,这也正体现了其灵活之处。...Backbone 请求,包括 Backbone.sync / model.fetch() 等, 本质上还是调用 jQuery $.ajax 方法(默认情况下),也就是传统 xhr 方式,使用...另一个难点在于,Backbone.View constructor / initialize “构造函数”,并不能接受自定义 props 参数。...,使其能方便应用于各种类型既有项目的 TDD 开发和重构 之前其他测试框架下用例,可以快速迁移到 jest Backbone.View 视图组件经过 ES6 升级和合理封装后,可以明显改善页面的整洁度

3.4K10

进阶攻略|最全前端开源JS框架和库

,Vue.js 集中 MVVM 模式上视图模型层,并通过双向数据绑定连接视图和模型。...其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序。...Ionic遵循视图控制模式,通俗理解和Cocoa触摸框架相似。视图控制模式,我们将界面的不同部分分为视图或包含其他视图视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...moo.fx整体采用模块化设计,所以可以基础上开发你需要任何特效。...PhantomJS让你可以运行一个纯粹 WebKit —— Safari 和 之前版本 Chrome 渲染引擎(现在是 Blink)。

3.7K71

前端进阶攻略|最全前端开源JS框架和库

,Vue.js 集中 MVVM 模式上视图模型层,并通过双向数据绑定连接视图和模型。...其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序。...Ionic遵循视图控制模式,通俗理解和Cocoa触摸框架相似。视图控制模式,我们将界面的不同部分分为视图或包含其他视图视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...moo.fx整体采用模块化设计,所以可以基础上开发你需要任何特效。...PhantomJS让你可以运行一个纯粹 WebKit —— Safari 和 之前版本 Chrome 渲染引擎(现在是 Blink)。

3.8K70

JS简史

当用户点击一个 tab 时,用户会被带到一个新页面,或者是HTML重新渲染之前调整模板参数变量并刷新整个页面。...对富客户端应用来说,更结构化方式才是更好Backbone 办法是将代码划分为数据模型类、操作这些数据函数集合、显示它们视图类;还提供了一些幕后自动处理方法。...同样重要是,如果数组 $users.list 数据变化了,AngularJS 就会自动根据更新后新数据自动重新渲染列表,而无需开发者干预。...Facebook 2013 年发布了 React,一个小巧和极速渲染前端框架。随后其又在 2014 年发布了其基于事件应用管理和开发工具 Flux。...React 初期主要被构想成一个 MVC 框架视图层语言。

1.4K40

前端ReactJS技术介绍

View 非常薄,不部署任何业务逻辑,称为“被动视图”(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。 这个Android开发中用得比较多。...React 视图通常采用包含以自定义 HTML 标记规定其他组件组件渲染。...React 为程序员提供了一种组件不能直接影响外层组件 (“data flows down”) 模型,数据改变时对 HTML 文档有效更新,和现代单页应用组件之间干净分离。...React可以浏览器端或服务端进行渲染,甚至借助于React Native,可在移动设备渲染。...组件生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数,will 函数进入状态之前调用

5.4K40

vuejs组件以及父子组件间通信传值

切换到写Vuejs代码,你不需要去关注dom层操作,更多精力是放在处理数据上,数据是什么,就让页面显示什么,操作数据,就是操做view(视图),这与JQuery是不一样,编程思路是需要进行转化...,大量操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成没有改变数据地方也重新渲染了DOM节点,这样就造成了很大程度上资源浪费,用内存中生成与真实DOM与之对应数据结构,这个在内存中生成结构称为虚拟...v-if:值类型任何,根据表达式真假条件渲染元素,表达式值为false是,该元素会从dom移除 官方解释:切换时元素及它数据绑定 / 组件被销毁并重建。...组件向父组件传值,通过emit方法向外触发事件方式,当点击组件时候,组件绑定点击click事件方法,组件methods方法内,通过emit向外触发一个自定义事件 父组件创建组件同时可以去监听父组件...,父组件通过v-on绑定自定义属性方式存储父组件数据,然后通过props组件接收,这样就可以拿到父组件数据 而反过来,组件想要向父组件通信传值,通过emit自定义事件向外触发方式

20.4K10

backbone 整体架构学习

一、是什么     构建前端MVC(Model,View,Collection)模型框架,其中Model是数据模型,Collection是数据模型集合,View是视图 二、依赖     backbone...依赖underscorejs(主要集成了一些数据model处理方法),项目需要时,也可以加上jQuery,因为backbone数据处理默认是ajax,而jQuery封装了强大DOM操作和ajax...(backbone源代码默认指定ajax方式,将数据提交同步到服务器,ajaxURL即modelURL字段) Backbone.sync = function(method, model) {...(); // 启动路由历史管理 // 此时,页面输入 xx.xx.demo.html#help , 会执行 123 七、事件委托 注意:backbone视图加载都是通过事件委托完成 var...change', this.show ); // 监听事件,当模型数据发生改变(change)时,触发 this.show 事件 }, show: function

67900

前端Js框架汇总

其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数丰富API; 视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序。...Ionic遵循视图控制模式,通俗理解和 Cocoa 触摸框架相似。视图控制模式,我们将界面的不同部分分为视图或包含其他视图视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...一个很好例子就是标签栏(Tab Bar)视图控制器处理点击标签栏一系列可视化面板间切换。 浏览我们API文档来了解视图控制器和Ionic可用Javascript实用工具。...这些模板都是响应式,并且没有使用任何JavaScript。 用途:真的是很精美的一个样式框架,便于我们快事构建一些个人产品,当然也可以服务于工作一些项目。...没有强迫用户编写自定义代码,新控制台也可完全自定义配置。

6.4K30

2022 最新 Vue 3.0 面试题

这里适合在更新之前访问现有的 DOM,比如手动移除已添加事件监听器,该钩子服务器端渲染期间不被调用,因为只有初 次渲染会在服务端进行 6、updated 由于数据更改导致虚拟 DOM 重新渲染和打补丁...(必会) 1、父组件向组件传递数据 父组件内设置要传数据,父组件引用组件上绑定一个自定义属性并把数据 绑定在自定义属性上,组件添加参数 props 接收即可 2、组件向父组件传递数据...3.2)组件 created 订阅方法 eventBus. on(“自定义事件名”,methods 方法 名) 3.3) 另一个兄弟组件 methods 写函数,函数中发布 eventBus...$emit("自定义事件名”) 3.4) 组件 template 绑定事件(比如 click) 10、组件写 name 选项有什么作用?...和 oldVnode 进行比较后,生成真实 DOM 68、Vue 操作 data 数组方法哪些可以触发视图更新,哪些不可以,不可以的话有什么解决办法

11810

backbone 整体架构学习

一、是什么     构建前端MVC(Model,View,Collection)模型框架,其中Model是数据模型,Collection是数据模型集合,View是视图 二、依赖     backbone...依赖underscorejs(主要集成了一些数据model处理方法),项目需要时,也可以加上jQuery,因为backbone数据处理默认是ajax,而jQuery封装了强大DOM操作和ajax...(backbone源代码默认指定ajax方式,将数据提交同步到服务器,ajaxURL即modelURL字段) Backbone.sync = function(method, model) {...(); // 启动路由历史管理 // 此时,页面输入 xx.xx.demo.html#help , 会执行 123 七、事件委托 注意:backbone视图加载都是通过事件委托完成 var...', this.show ); // 监听事件,当模型数据发生改变(change)时,触发 this.show 事件 }, show: function(model

78680

目前比较火前端框架及UI组件

8.backbone.js 地址:点击打开链接 描述:Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)结构。...其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数丰富API; 视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序。...Ionic遵循视图控制模式,通俗理解和 Cocoa 触摸框架相似。视图控制模式,我们将界面的不同部分分为视图或包含其他视图视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...一个很好例子就是标签栏(Tab Bar)视图控制器处理点击标签栏一系列可视化面板间切换。 浏览我们API文档来了解视图控制器和Ionic可用Javascript实用工具。...这些模板都是响应式,并且没有使用任何JavaScript。 用途:真的是很精美的一个样式框架,便于我们快事构建一些个人产品,当然也可以服务于工作一些项目。

4.9K40

VUE面试题

jQuery,我们可以使用以下方法实现URL编码和解码。...:compile解析模板指令,将模板变量替换成数据,然后初始化渲染页面视图,并将每个指令对应节点绑定更新函数,添加监听数据订阅者,一旦数据有变动,收到通知,更新视图第三步:Watcher订阅者是...组件需要数据,可以props接受定义。而组件修改好数据后,想把数据传递给父组件。可以采用emit方法。 19、你是怎么认识vuex? 答:vuex可以理解为一种开发模式或框架。...答:assets文件夹是放静态资源;components是放组件;router是定义路由相关配置;view视图;app.vue是一个应用主组件;main.js是入口文件 22、vue.cli怎样使用自定义组件...emm..., 看着镜子里那张脸,这辈子应该是没办法从脸上得到任何便利了... ?

2.8K22

Backbone.js应用基础

前言:   Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery;其主要组件有模型,视图,集合,路由;与后台交互主要是通过...Restful JSON 进行数据传输; 基础Backbone.js知识:   1、引入js文件:如果依赖于第三方类库如jquery,则最好先引入;之后引入underscore.js 这是必须引入且引入...backbone.js之前,其引入文档结构如下: Backbone   2、新建M.V.C:     Model对象表示数据模型,用于定义数据结构; View用于数据展示,绑定DOM事件和处理页面逻辑, Collection是管理数据模型集合,用于查找或保存数据...('age'); //console.log(a+'==='+oa); }); }, myFun: function(){ //自定义事件

64530

虚拟DOM及其实现

MVVM 可以很好降低我们维护状态 -> 视图复杂程度(大大减少代码视图更新逻辑)。...但是这不是唯一办法,还有一个非常直观方法,可以大大降低视图更新操作:一旦状态发生了变化,就用模版引擎重新渲染整个视图,然后用新视图更换掉旧视图。...最后结论会是:对于局部视图更新,没有问题(Backbone就是这么干);但是对于大型视图,如全局应用状态变更时候,需要更新页面较多局部视图时候,这样做法不可取。...之前章节所说,状态变更->重新渲染整个视图方式可以稍微修改一下:用 JavaScript 对象表示 DOM 信息和结构,当状态变更时候,重新渲染这个 JavaScript 对象结构。...真正DOM元素上应用变更 patch(root, patches) 当然这是非常粗糙实践,实际还需要处理事件监听等;生成虚拟 DOM 时候也可以加入 JSX 语法。

28920
领券