jQuery函数未在Backbone View Render上触发 - 腾讯云开发者社区

文章/答案/技术大牛

发布

6、backbone中的view实例

Backbone的view是用来显示你的model中的数据到页面的，同时它也可用来监听DOM上的事件然后做出响应。...//此处添加下面的试验代码 })(jQuery); 1、一个简单的view .. code:: javascript SearchView = Backbone.View.extend..... code:: javascript SearchView = Backbone.View.extend({ initialize: function(){ //this.render...events:{ //就是在这里绑定的 'click input[type=button]' : 'doSearch' //定义类型为button的input标签的点击事件，触发函数...events:{ //就是在这里绑定的 'click input[type=button]' : 'doSearch' //定义类型为button的input标签的点击事件，触发函数

9072 0

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

上一篇《浅谈HTML5单页面架构（一）——requirejs + angular + angular-route》探讨了angular+requirejs的一个简单架构，这一篇继续来看看backbone...没有在dom属性上做文章，我们还是按原生的或者说熟悉的方法写东西。...el指向对应的视图dom元素，用的是css选择器，在View中可以使用this.$el获取到这个jquery风格变量。render是自定义的函数。到这里，运行程序，就能看到module1的效果了。...数据返回后，使用backbone内建的trigger触发事件，通知监听者，也就是view层了。...感谢backbone的健壮，我开始还以为这样肯定会报错，结果backbone没找到对应函数就停止执行了，不错，赞一个。没有了一个个的相应函数，取而代之的是route事件处理器。

2.8K4 0

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

是的

没有找到

Backbone事件模块及其用法

绑定on方法使用on方法可以给一个对象的自定义事件绑定触发该事件时执行的函数，当自定义的事件触发时，绑定的函数将会被执行。...在第一个属性事件change:score 中，通过回调函数中model模型对象的previous方法，获取上一次保存的score属性值。...change’, view.render) 上面监听方法也等价于如下代码： model.on(‘change’, view.render, view) 其中，第三个参数为上下文环境对象，此时它的值为...view，即model对象在触发change事件时，关联view对象进行执行view.render动作。...change触发的是原this.render，方法中的this依然是不可性预计 window.ProductView = Backbone.View.extrend({ initialize

2.7K5 0

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

其主要功能模块包括： Events：提供一系列事件的绑定和触发等功能 Model: 对数据或状态的转化、校验、计算派生值、提供访问控制等，也负责数据的远程同步等，并有事件触发机制；作用类似于 MobX...Backbone 中的请求，包括 Backbone.sync / model.fetch() 等，本质上还是调用的 jQuery 中的 $.ajax 方法（默认情况下），也就是传统的 xhr 方式，使用...另一个难点在于，Backbone.View 的 constructor / initialize “构造函数”中，并不能接受自定义的 props 参数。...$el.find('.menu1_wrapper').replaceWith( (new Menu1View).render()....测试 Backbone.View 组件比之于测试 react 还需要 enzyme 等的支持，测试 Backbone.View 其实要简单许多，只需要获取到其 $el 属性，调用 jQuery 的惯有方法即可

4.4K1 0

BackboneJs 入门学习—View 实践

BackboneJs入门学习—View实践篇假期过的还好么？哈哈，国庆跑去耍啦～确实累着了，一躺下就是睡……_ OK，继续我们的 Backbone 学习之旅吧！...上一篇中，我们只是简单的介绍了 View 模块，讲解了 View 的概念。本篇中，我们讲解 View 的相关属性； 1.el属性： el属性是做何用呢？...用于引用 Dom 中的一些元素，每个 Backbone 的 View 属性都有这种 el 属性；（2）....templete); }, //进行事件绑定 events={ 'click input[type=button]':'doSearch' //定义类型为button的input标签的点击事件，触发函数...通常我们需要重载render 函数,声明事件,通过tagName,className或id为视图指定根元素

3091 0

Backbone.js应用基础

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

1.1K3 0

前端ReactJS技术介绍

用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。...Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）。...关键概念渲染函数 ReactDOM.render是 React 的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。用于将模板转为HTML语言，并插入指定的 DOM 节点 render方法，用于输出组件。组件的用法与原生的HTML标签完全一致，可以任意加入属性。组件的属性可以在组件类的this.props对象上获取。...这样当指定事件回调方法时，this很有可能指定的是触发事件的组件。可以用ES6里的箭头函数来解决这个问题。

6.9K4 0

backbone 整体架构学习

一、是什么构建前端MVC（Model，View，Collection）模型的框架，其中Model是数据模型，Collection是数据模型的集合，View是视图二、依赖 backbone...依赖underscorejs（主要集成了一些数据model的处理方法），项目需要时，也可以加上jQuery，因为backbone的数据处理默认是ajax，而jQuery封装了强大的DOM操作和ajax...default: { name: 'hello' }, initialize: function() { // 初始化构造函数...======================================================================================= var V = Backbone.View.extend...V = Backbone.View.entend({ el: $('body'), // 指定委托元素 events: { 'click input

9170 0

backbone 整体架构学习

9878 0

5、backbone中的Router实例

每点击一次这样的链接 action 会触发一个事件，但是url也会改变，这样刷新的话，岂不是会自动触发事件。...(); 总结，router的使用看起来能够去除通过对dom节点的绑定来触发事件的那种繁琐，但唯一让我觉得不爽的就是点击之后如果再刷新，就会重新执行一遍对应的方法，因为url已经变了。...另外，在其他的模块中（指：model,view,collection），也可以通过使用routes:{}来根据链接触发函数。... jquery.js"> <script src="http://...(); })(jQuery); 最新的代码参考：https://gist.github.com/the5fire/6987376

6291 0

8、backbone实例todos分析(二)view的应用

首先是创建一个全局的Todo的collection对象 var Todos = new TodoList; // 先来看TodoView，作用是控制任务列表 var TodoView = Backbone.View.extend...', this.render); this.model.bind('destroy', this.remove); //这个remove是view的中的方法，用来清除页面中的dom...主要是整体上的一个控制 var AppView = Backbone.View.extend({ //绑定页面上主要的DOM节点 el: $("#todoapp"), /...当任务列表改变时会触发对应的事件。...这一篇文章就先到此为止，文章中我们了解到在todos这个实例中，view的使用，以及具体的TodoView和AppView中各个函数的作用，这意味着所有的肉和菜都已经放到你碗里了，下面就是如何吃下去的问题了

7242 0

利用Backbone.js构建监控前端的解决方案

视图部分，可能需要使用Backbone的View来渲染数据，结合模板引擎如Underscore.js的template。...另外，数据可视化可能需要第三方库，比如D3.js或Chart.js，这里需要提及如何将Backbone与这些库集成，比如在View中监听模型变化，然后更新图表。...Frontend: 使用 jQuery-Flot-Graphs 呈现数据的 JavaScript 代码。每个环境都有几张图表，都显示在同一页面上。图表是一组测量结果。...$el.append(environmentView.render().el); }});// 定义图表集合视图var ChartsView = Backbone.View.extend({ el...$el.append(chartView.render().el); }});// 定义添加环境表单视图var AddEnvironmentView = Backbone.View.extend({

6511 0

Node.js建站笔记-使用react和react-router取代Backbone

react拥有丰富的组件，虽然不如Backbone和underscore这对老基友成熟，但考虑到嗨猫的前端并不需要很多的MV*架构，目前使用到Backbone的地方只有hash路由而已，所以最终决定使用...react-router取代Backbone，underscore也从项目依赖中移除。...React的新版本将react-dom分离出来专注于组件的render，原来的React.render函数被弃用。...然后如下方式生产router： render((),container); 以上便是react-router替代Backbone的大概流程，目前遗留的问题有... 除了标签不同以外，其他语法与常规react组件相同，需要注意的是几个监听函数： onSubmit：用于拦截表单默认的submit行为，这一点与jquery validation

2.9K9 0

backbone.js中的异常处理

比如一个collection create了一条model，model会save到server，如果save过程中出现错误，collection不要add这条数据同时view不要展现这条数据怎么处理？...还有比如一个model的修改如save,destroy都会触发change事件导致view的render，如果发生错误怎么阻止render？...并且你说的如何阻止render方法，这个只要把save里面的错误处理的参数填上就可以了。...error:function(model, error) { //错误处理 alert('error'); } } 其次在修改时的save和destroy触发reander...补充：这个异常的上下文： 7、backbone实例todos分析（一） 8、backbone实例todos分析(二)view的应用- from the5fire.com

1.5K2 0

JavaScript从初级往高级走系列————MVVM-Vue

中在jQuery代码中操作视图和数据，混在一块了以数据驱动视图，只关心数据变化，DOM操作被封装只改数据，视图自动更新 MVVM的理解 MVC （Model View Controller...（render函数） render函数 with – 实际开发不推荐用 var obj = { name: 'zhangsan', age: 20, getAddress: function..._c 其实相当于 snabbdom 中的 h 函数 render 函数执行之后，返回的是 vnode 7.png updateComponent 中实现了 vdom 的 patch 页面首次渲染执行...函数包含模板中用到的data中的属性，都变成了js变量模板中的v-model v-if v-on 都变成了 js逻辑 render 函数返回 vnode 8.png 9.png 第二部：响应式开始监听...Object.defineProperty 将 data 的属性代理到 vm 上 10.png 第三步：首次渲染，显示页面，且绑定依赖 11.png 第四步： data 属性变化，触发 rerender

6543 0

所历前端“姿势”更替记(其一)

阶段二：jQuery+Backbone+Underscore 大概在一两个月后，各平台才陆续迁移至新的机制： jQuery+Backbone+Underscore；现在看来，选择真是很重要；那时如何没有采用...}) %> true 即便在这个阶段，布局文件和逻辑代码也是没有分开的；统一写于 php 文件之内； var mainView = Backbone.View.extend...true, onCallToast : function(e){ truetrue// do call toast true} }); 在这个阶段，比于先前，从开发效率角度来看，并未有多少提高；不过，工具上摒弃了...阶段三：jQuery+Backbone+Underscore+RequireJs 在这个阶段有引入RequireJs，也是经历近两个多月才陆续迁移的；本身这倒可不列为一阶段，不过前端项目开发结构大改：前端后完全分离...); this.render(); }, render: function(){ App.V.prototype.render.apply(this); return

9586 0

前端解耦的一个最简单示例

第一步解耦，把 View 层分离出来： Jim 同时，引入一表示 name 的...第三步解耦，把 Controller 和 Model 的关联关系剥离出来： Jim 借助 JQuery，增加绑定方法，关联...第四步解耦，借助 backbone.js，把数据和模板分离：增加 js 代码，渲染模板： window.NameView = Backbone.View.extend...({ template : _.template($('#name-template').html()), …… render: function() { $(this.el

1K2 0

2、通过helloworld来认识下backbone

a href="http://www.the5fire.com">更多教程 jquery...); } }); AppView = Backbone.View.extend({ el: $("body..."), initialize: function () { //构造函数，实例化一个World集合类，并且以字典方式传入AppView...); 我认为代码是直观的，这里面涉及到backbone的三个部分，view、model、collection，以后都会提到，这里只要了解，model代表一个数据模型，...collection是模型的一个集合，而view是用来处理页面以及简单的页面逻辑的。

4421 0

Singal Page App：使用Knockout和RequireJS创建高度模块化的单页应用引擎背景知识文档结构服务端API准备Require配置与系统配置模块中的工作模块间的工作烂图赏鉴代码送上

开篇扯淡距离上一篇文章已经有好几个月，也不是没有时间记录点东西，主要是换了新的工作，在一家外资工作，目前的工作内容大多都是前端开发，新接触的东西因为时间原因，大多还不成体系，所以这么长时间什么都没记录下来...，呵呵，呵呵，正如Knockout官方文档里说的，Everyoue loves jquery。.../Libs/underscore.min', 'lib/backbone':'./Libs/backbone', 'lib/backbone/eproxy':'..../Libs/backbone.eproxy', 'lib/backbone/super': '.... } }); return app; } ); 这里主要看以下两个点： 1.在Load阶段，组件监听了SWITH_CATEGORY这个事件，在事件触发后

1.5K6 0

现代前端技术解析：现代前端交互框架

高效实用jQuery：尽可能使用id选择器进行DOM查询操作；缓存一切需要复用的jQuery DOM对象，使用find()子查询；不要滥用jQuery，尽可能使用原生代码代替；尽可能使用jQuery...MV*交互模式前端MVC模式将页面DOM相关的内容抽象成数据模型、视图、事件控制函数（Model-View-Controller）三部分。...前端MVP模式 MVP（Model-View-Presenter）和MVC区别在于：用户在进行DOM修改操作时将通过View上的行为触发，然后将修改通知给Presenter来完成后面的Model修改和其他...$el.innerHTML = html; // View上的改变通知Presenter改变Model和其他View $('#input').on('change', (...数据变更检测：方式原理说明手动触发绑定通过在数据对象上定义get()、set()方法（函数中包含View层的渲染），手动触发需要主动调用重新扫描HTML页面上的所有节点的方法脏检测机制 ViewModel

1.4K3 0

点击加载更多

6、backbone中的view实例

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

Backbone事件模块及其用法

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

BackboneJs 入门学习—View 实践

Backbone.js应用基础

前端ReactJS技术介绍

backbone 整体架构学习

backbone 整体架构学习

5、backbone中的Router实例

8、backbone实例todos分析(二)view的应用

利用Backbone.js构建监控前端的解决方案

Node.js建站笔记-使用react和react-router取代Backbone

backbone.js中的异常处理

JavaScript从初级往高级走系列————MVVM-Vue

所历前端“姿势”更替记(其一)

前端解耦的一个最简单示例

2、通过helloworld来认识下backbone

Singal Page App：使用Knockout和RequireJS创建高度模块化的单页应用引擎背景知识文档结构服务端API准备Require配置与系统配置模块中的工作模块间的工作烂图赏鉴代码送上

现代前端技术解析：现代前端交互框架

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐