有没有办法在Backbone/Marionette中重新渲染任何自定义JQuery事件的子视图？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

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

5.3K2 0

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

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

5.9K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

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

1.9K1 0

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

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

2K2 0

浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

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

2.8K4 0

用 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 升级和合理封装后，可以明显改善页面的整洁度

4.4K1 0

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

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

4.7K7 1

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

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

4.9K7 0

BackboneJs 入门学习—View 实践

在Backbone的官方文档中作如下解释：所有的视图都拥有一个 DOM 元素（el 属性），即使该元素仍未插入页面中去。...视图可以在任何时候渲染，然后一次性插入 DOM 中去，这样能尽量减少 reflows 和 repaints 从而获得高性能的 UI 渲染。即：（1）....用于引用 Dom 中的一些元素，每个 Backbone 的 View 属性都有这种 el 属性；（2）....，重新回顾下View，它在与模型数据的关系时息息相关的：当模型数据发生改变，视图立刻自动更新，这一切都不需要重绘页面。...创建自定义的视图类。通常我们需要重载render 函数,声明事件,通过tagName,className或id为视图指定根元素

3201 0

JS简史

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

2K4 0

前端ReactJS技术介绍

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

6.9K4 0

某知名it培训班前端三阶段vue相关面试题

props，不能直接修改；*若子组件需修改数据，需通过触发父组件的自定义事件，由父组件修改源数据，再反向更新子组件props；*目的：保证数据流向可追溯，避免多个组件随意修改数据导致状态混乱，符合“单向绑定...####15.Vue生命周期的作用生命周期钩子允许开发者在组件不同阶段插入自定义逻辑，核心作用：1.**初始化逻辑**：created中请求数据、初始化变量；2....操作DOM）|自动更新视图（数据驱动，ViewModel实现响应式）||应用框架|jQuery、Backbone.js|Vue、React（类MVVM）、Angular|####32.Vue组件中的data..."||子→父|自定义事件（\$emit）|子组件this....：子组件向父组件传递数据，父组件自定义渲染逻辑：```Plain<!

1050 0

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

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

21.9K1 0

前端Js框架汇总

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

8.3K3 0

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

6211 0

backbone 整体架构学习

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

9410 0

backbone 整体架构学习

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

9898 0

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

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

5.7K4 0

VUE面试题

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

3.2K2 2

虚拟DOM及其实现

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

5762 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭