阅读更多

0顶
0踩

Web前端

原创新闻 Backbone和ReactJS的整合

2015-07-24 15:31 by 见习记者 zhangzhaoaaa 评论(0) 有7331人浏览

Hello-React-Backbone

 

地址猛戳这里

目的:做Backbone和ReactJS的整合,该例子使用了Backbone的Model和ReactJS整合,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子 。

实现内容:通过传递的json数据构建Backbone的Model,将数据展现出来,点击按钮,修改数据,展示修改后的数据,btw,实现组件内部数据回传给外部的功能。

使用组件: 1. jquery 2. underscore 3. backbone 4. reactjs 5. seajs

例子是直接改的SeaJS的Hello的例子,可以看到此例子的痕迹哦。

注意:在此例子中,SeaJS例子已经处理了jquery,underscore,backbone,当然ReactJS也得处理咯,我这里处理相对简单,将ReactJS第一行的typeof define==="function"&&define.amd 改成了typeof define==="function"&&define.cmd即可,也就是将amd改成cmd。

例子目录结构:
app -->helloMessage.html 例子的主页面
myreact --> app.jsx 入口组件
myreact --> components--> HelloMessage.jsx 信息子组件
sea-modules--> 依赖的库
static\hello\src\build-->app.js app.jsx编译后的js文件
static\hello\src\build\components-->HellowMessage.js HellowMessage.jsx编译后的js文件

JSX文件编译:安装nodejs(话说这个是必装的啊),npm install -g react-toolshttps://www.npmjs.com/package/react-tools
执行命令:jsx -w -x jsx myreact/ static/hello/src/build 在主目录下(hello-react-backbone)下执行 -w 是观察文件修改,并自动重新生产js文件到指定的目录下 -x 文件扩展名的处理,默认是js myreact/ 目录是jsx文件的目录, static/hello/src/build 是生产js文件目录

ps:你要想在define作用域内直接使用JSXTransformer.js,请确定能其引入作用域中,我看到github上有人用requirejs做了插件处理,可以直接使用JSXTransformer.js编译Jsx文件,不过最好还是编辑成js文件吧,别老想着让自己认识,你得让机器认识这些代码才行啊。。。 可参考此处:https://github.com/philix/jsx-requirejs-plugin

参考:react-backbone的TodoMVChttps://github.com/tastejs/todomvc/tree/master/examples/react-backbone

0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • hello-react-backbone:Backbone和ReactJS的整合,该项目使用了Backbone的Model和ReactJS进行整合使用,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子

    #Hello-React-Backbone**目的:**做Backbone和ReactJS的整合,该例子使用了Backbone的Model和ReactJS整合,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子 。**实现内容:**通过传递的json数据构建...

  • react前端面试题整合

    它用于处理网页和移动应用程序的视图层。React 是由 Facebook 的软件工程师 Jordan Walke 创建的。在 2011 年 React 应用首次被部署到 Facebook 的信息流中,之后于 2012 年被应用到 Instagram 上。 React 的主...

  • 10个最佳的ReactJS实例教程[译文]

    在这份教程中,Alex 讲述了使用Flux和backbone来构建ReactJS应用的 最有效的概念和模式。 Backbone库是用来填充flux架构之间的空隙的,如果你已经有亲手使用Flux构建ReactJS应用的经验,那么你可以快速掌握它。 ...

  • Backbone 中的继承

    最近又看了reactjs,很羡慕继承,想整合到项目中,但是用reactjs目前还不现实,多希望Backbone 也能拥有这样的特性,于是就查看Backbone中的继承到底是怎么回事。 以下是Backbone 中的extend源码部分 ...

  • 基于Reactjs实现webapp(加精)

    由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花...

  • react框架和vue框架的区别以及相同之处

    React与当时流行的jQuery,Backbone.js和Angular 1等框架不同,它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM(虚拟DOM)并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML...

  • ReactJS ,是否言过其实?

    这“百鸟”中,数ReactJS尤其火热,出身高贵,一面世就引起关注! 之后Facebook更是宣称支持构建安卓以及苹果原生应用,这对很多烦恼于多平台的企业更是一场及时雨! 但是事实真的如此吗?我在【如何选择框架】...

  • react与框架整合

    结合网络相关文档,记载react如何与线下框架整合,大神请绕道 gulp+require+backbone+react,借鉴github上demo梳理一下 大神github地址 https://github.com/phodal/backbone-react 1.页面结构  与传统搭建...

  • node.js、React和VUE的纯理论

    2.Instagram是一个’single page’网页应用完全由React和Backbone.Router构建的。设计者可以像通常一样使用JSX编写React代码。 3.我构建内部的应用雏形运行React在一个web工作站上,使用React去驱动本地ios视图通过...

  • 百度母婴技术团队—基于Reactjs实现webapp #1

    由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花...

  • Vue与React两个框架的区别和优势对比

    React与当时流行的jQuery,Backbone.js和Angular 1等框架不同,它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM(我们稍后探究)并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写...

  • MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式。 交互方式(所有通信都是单向的): ...

  • React.js: web开发者的14个工具和资源

    自从Facebook在2013年发布了库之后,React.js正在快速被...本文为广大开发者介绍了14个工具和资源,助力web开发。 作者:鲁行云来源:SDK.cn|2017-02-09 15:19  移动端  收藏  分享 CTO训练

  • 基于React.js实现webapp的技术实践

    由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花...

  • 一大波前端干货整合【技术社区、博文、资源、工具】

    ...RequireJS与Backbone简单整合   RequireJS  RequireJS中文网 AngularJS  Angular中文网   angular-ui-router   AngularJS移动开发中的坑汇总 ReactJS  深入理解 React官博文   ...

  • 组态王仿真学习案例:石灰石断烧系统详解,实时历史曲线记录、报表分析与报警管理一网打尽,入门到进阶全功能展示

    内容概要:本文详细介绍了利用组态王进行石灰石煅烧系统的仿真开发,涵盖实时曲线绘制、报警系统配置、报表生成功能等多个方面。文章从实际案例出发,通过具体的代码片段和操作步骤,讲解了如何实现温度PID控制、设备联锁、能源统计等功能。同时,作者分享了许多实践经验,如解决曲线不刷新问题、优化报警逻辑、提高报表生成效率等,帮助读者快速掌握组态王的核心技术和应用场景。 适合人群:对工业自动化感兴趣的初学者以及希望深入了解组态王使用的工程师。 使用场景及目标:适用于需要构建工业控制系统仿真模型的学习者或开发者,旨在通过实例演练提升对组态王的理解和运用能力,最终能够独立完成类似项目的开发。 其他说明:文中提供了丰富的代码示例和技术细节,有助于读者更好地理解和实践。此外,还特别强调了一些常见的错误和注意事项,如控件命名规范、数据源绑定规则等,确保项目顺利实施。

  • CAD绘制圆形洞室展示图的初步实现.docx

    CAD绘制圆形洞室展示图的初步实现.docx

  • 基于下垂虚拟同步机的三电平双机离网并联仿真模型:C语言算法,性能优越,适用于储能逆变器和UPS产品,环流小,动态响应良好。

    内容概要:本文详细介绍了基于C语言实现的三电平双机离网并联虚拟同步机控制算法。该算法主要用于解决储能逆变器和UPS系统中双机并联运行时遇到的问题,如功率分配不均、环流超标和动态响应不佳。文中展示了具体的下垂控制、环流抑制、动态响应优化以及中点电位平衡等核心技术的实现方式。此外,还讨论了如何通过自适应虚拟阻抗、状态观测器和查表法等手段提高系统的稳定性和效率。最终,该算法在实际项目中表现出色,实现了高效的功率分配和稳定的动态响应。 适合人群:从事电力电子、储能系统和UPS系统开发的技术人员,尤其是对C语言编程和控制算法有一定了解的研发人员。 使用场景及目标:适用于需要高效、稳定双机并联运行的储能逆变器和UPS系统的设计与开发。主要目标是解决双机并联时的功率分配不均、环流超标和动态响应慢等问题,确保系统在各种工况下的稳定性和可靠性。 其他说明:本文不仅提供了详细的代码实现,还分享了许多实用的调试技巧和实践经验,有助于读者更好地理解和应用这些技术。

  • 方波信号发生器电路仿真

    方波信号发生器电路仿真,基于LM741运算放大器的方波信号发生器电路仿真设计及实现

Global site tag (gtag.js) - Google Analytics