首页
学习
活动
专区
工具
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.6K10

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

之前也有看过淘宝团队实践,利用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

67600

前端Js框架汇总

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

6.4K30

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

78380

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 数组方法哪些可以触发视图更新,哪些不可以,不可以的话有什么解决办法

11210

目前比较火前端框架及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(){ //自定义事件

63930

虚拟DOM及其实现

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

28320
领券