Backbone.js实战之视图学习笔记

最新推荐文章于 2024-10-11 17:39:47 发布
最新推荐文章于 2024-10-11 17:39:47 发布
阅读量114 收藏
点赞数
文章标签： javascript 测试 前端 ViewUI
原文链接：http://www.cnblogs.com/NapXie/p/5614117.html
版权

　　严格来说模型（Model）和集合（Collection）都属于底层的数据处理，真正与页面交互的视图（View)，他的核心功能是处理数据业务逻辑，绑定DOM事件，渲染模型和集合数据。

  • el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。
  • initialze：调用new时，会触发的函数调用，类似构造函数。
  • render：触发DOM操作，浏览器会渲染
  • 最后一句，说明在new时，可以传递参数

1.1   通过视图对象添加DOM元素

a.       功能描述

b.      实现代码

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var testview = Backbone.View.extend({
        el: '#show',
        render: function (content) {
            this.el.innerHTML = content;
        }
    });
    var test = new testview();
    test.render("backbone是构建前端MVC的利器");
</script>

 

c.       页面效果

d.      源码分析

1.2    视图对象访问模型

a.       功能描述

b.      实现代码

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10107",
        Name: "陶国荣",
        Score: 750
    });
    var stusview = Backbone.View.extend({
        el: '#show',
        render: function () {
            this.el.innerHTML = JSON.stringify(this.model);
        }
    });
    var stuv = new stusview({ model: stus });
    stuv.render();
</script>

 

c.       页面效果

d.      源码分析

1.3   视图对象访问集合对象

a.       功能描述

b.      实现代码

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var stumodels = [{
        Code: "10101",
        Name: "刘真真",
        Score: 530
    }, {
        Code: "10102",
        Name: "张明基",
        Score: 460
    }, {
        Code: "10103",
        Name: "舒虎",
        Score: 660
    }, {
        Code: "10104",
        Name: "周小敏",
        Score: 500
    }, {
        Code: "10105",
        Name: "陆明明",
        Score: 300
    }];
    var stulist = new Backbone.Collection(stumodels);
    var stuview = Backbone.View.extend({
        el: '#show',
        render: function () {
            var curlist = this.collection.models;
            for (var i = 0; i < curlist.length; i++) {
                this.el.innerHTML += JSON.stringify(curlist[i]) + "</br>";
            }
        }
    });
    var stuv = new stuview({ collection: stulist });
    stuv.render();
</script>

 

c.       页面效果

d.      源码分析

1.4   处理逻辑的模板

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="score"></div>
    <script type="text/template" id="score-tpl">
       <%= score>600 ? "优秀":"及格"%>
    </script>
</body>
<script type="text/javascript">
    var stuview = Backbone.View.extend({
        el: $("#score"),
        initialize: function () {
            this.template = _.template($("#score-tpl").html());
        },
        render: function (pscore) {
            this.$el.html(this.template({ score: pscore }));
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
    stuv.render(600)
</script>

 

c.       页面效果

d.      源码分析

1.5   显示多项内容的模板

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus"></ul>
    <script type="text/template" id="stus-tpl">
       <li>编号：<%=Code%></li>
       <li>姓名：<%=Name%></li>
       <li>分数：<%=Score%></li>
    </script>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10107",
        Name: "陶国荣",
        Score: 750
    });
    var stuview = Backbone.View.extend({
        el: $("#ulshowstus"),
        initialize: function () {
            this.template = _.template($("#stus-tpl").html());
        },
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
        }
    });
    //实例化一个view视图
    var stuv = new stuview({ model: stus });
    stuv.render();  
</script>

 

c.       页面效果

d.      源码分析

1.6   自定义模板变量标记

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus"></ul>
    <script type="text/template" id="stus-tpl">
       <li>自定义模版变量标记</li>
       <li>编号：{{Code}}</li>
       <li>姓名：{{Name}}</li>
       <li>分数：{{Score}}</li>
    </script>
</body>
<script type="text/javascript">
    _.templateSettings = {
        interpolate: /\{\{(.+?)\}\}/g
    };
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10106",
        Name: "占小方",
        Score: 380
    });
    var stuview = Backbone.View.extend({
        el: $("#ulshowstus"),
        initialize: function () {
            this.template = _.template($("#stus-tpl").html());
        },
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
        }
    });
    //实例化一个view视图
    var stuv = new stuview({ model: stus });
    stuv.render();  
</script>

 

c.       页面效果

d.      源码分析

1.7   视图中简单事件绑定

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            text-align: center;
            padding: 5px;
        }
        .changed
        {
            border: solid 1px #555;
        }
    </style>
</head>
<body>
</body>
<script type="text/javascript">
    var stuview = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.append('<div id="backbone">backbone是构建前端MVC的利器</div>');
        },
        events: {
            'click div#backbone': 'togcls'
        },
        togcls: function () {
            $("#backbone").toggleClass("changed");
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
</script>

 

c.       页面效果

d.      源码分析

1.8   绑定视图中的多个事件

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            text-align: center;
            padding: 5px;
        }
        .changed
        {
            border: solid 1px #555;
        }
    </style>
</head>
<body>
    <div id="main">
    </div>
    <script type="text/template" id="main-tpl">
       <div id="backbone"><%=mess%></div>
       <input id="btnshow" type="button" value="点击一下" />
    </script>
</body>
<script type="text/javascript">
    var stuview = Backbone.View.extend({
        el: $("#main"),
        initialize: function () {
            this.template = _.template($("#main-tpl").html());
            this.render();
        },
        render: function () {
            this.$el.html(this.template({
                mess: "backbone是构建前端MVC的利器"
            })
            );
        },
        events: {
            'click div#backbone': 'togcls',
            'click input#btnshow': 'toggle'
        },
        togcls: function () {
            $("#backbone").toggleClass("changed");
        },
        toggle: function () {
            $("#backbone").toggle();
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
</script>

 

c.       页面效果

 

d.      源码分析

1.9   动态绑定和取消视图中的事件

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            text-align: center;
            padding: 5px;
        }
        .changed
        {
            border: solid 1px #555;
        }
    </style>
</head>
<body>
    <div id="main">
    </div>
    <script type="text/template" id="main-tpl">
       <div id="backbone">backbone是构建前端MVC的利器</div>
       <input id="btn_a" type="button" value="切换样式" />
       <input id="btn_b" type="button" value="取消绑定" />
       <input id="btn_c" type="button" value="重新绑定" οnclick="stuv.rebind()"/>
    </script>
</body>
<script type="text/javascript">
    var stuv = null;
    var stuview = Backbone.View.extend({
        el: $("#main"),
        initialize: function () {
            this.template = _.template($("#main-tpl").html());
            this.render();
        },
        render: function () {
            this.$el.html(this.template());
        },
        rebind: function () {
            this.delegateEvents(this.events);
        },
        events: {
            'click input#btn_a': 'btnclick_a',
            'click input#btn_b': 'btnclick_b'
        },
        btnclick_a: function () {
            $("#backbone").toggleClass("changed");
        },
        btnclick_b: function () {
            this.undelegateEvents();
        }
    });
    //实例化一个view视图
    stuv = new stuview();
</script>

 

c.       页面效果

d.      源码分析

1.10 使用Backbone框架开发Web应用

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
            width: 270px;
        }
        ul li
        {
            margin: 5px 0px;
        }
        ul .lh
        {
            font-weight: bold;
            border-bottom: solid 1px #555;
            background-color: #eee;
            height: 23px;
            line-height: 23px;
        }
        ul .lc
        {
            border-bottom: dashed 1px #ccc;
            height: 23px;
            line-height: 23px;
        }
        ul li span
        {
            padding-left: 10px;
            width: 80px;
            float: left;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus">
        <li class="lh">
            <span>编号</span>
            <span>姓名</span>
            <span>分数</span>
        </li>
    </ul>
    <br />
    <ul>
        <li>编号：
            <input id="txtCode" type="text" />
        </li>
        <li>姓名：
            <input id="txtName" type="text" />
        </li>
        <li>分数：
            <input id="txtScore" type="text" />
        </li>
        <li>
            <input id="btnSubmit" type="button" 
                   value="提交" />
        </li>
    </ul>
    <script type="text/template" id="stus-tpl">  
       <li class="lc">
           <span><%=Code%></span>
           <span><%=Name%></span>
           <span><%=Score%></span>
       </li>
    </script>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "10001",
            Name: "张三",
            Score: 100
        }
    });
    var stulist = Backbone.Collection.extend({
        initialize: function (model, options) {
            this.on("add", options.view.showmodel);
        }
    });
    var stuview = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.stul = new stulist(null, { view: this })
        },
        events: {
            "click #btnSubmit": "addmodel"
        },
        addmodel: function () {
            var stum = new student({
                Code: $("#txtCode").val(),
                Name: $("#txtName").val(),
                Score: $("#txtScore").val()
            });
            this.stul.add(stum);
        },
        showmodel: function (model) {
            this.template = _.template($("#stus-tpl").html());
            $("#ulshowstus").append(this.template(model.toJSON()));
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
</script>

 

c.       页面效果

d.      源码分析

 

转载于:https://www.cnblogs.com/NapXie/p/5614117.html

aeo82357
关注
Backbone.js实战之模型集合学习笔记
aeo82357的博客
06-23 134
关于这两天遇到的代码没有找到PHP页面，或者有跨域的问题； 解决方案： 1.在本机中安装PHP开发环璄，并可以执行PHP代码的页面； 2.将HTML页与PHP放置在同一个文件夹中，否则会有跨域问题； 3.将HTML页与PHP一直发给可以执行PHP页面代码的服务器； 4.或者做本地存储localStorage； 2,3,4其中一种都可行 一、创建集合对象 创建集合模型...
Backbone实战-初始Backbone
weixin_30527323的博客
09-11 140
　　随着人们对web应用程序用户体验的重视，越来越多的应用强化了前端代码的开发，使得前端的Javascript代码越加冗长而无序，各类AJAX交互请求错综复杂，如何科学有效地管理这些前端代码，是众多Web开发者面临的一道难题。基于这样一种背景，人们沿用服务器端的MVC结构体系，将其运用于前端技术的开发与管理，而Backbone就是这种结构的最佳实践。 Backbone简介 　　Backbone...
SpringMVC学习笔记-狂神说
qq_42760375的博客
08-02 205
介绍了MVC框架的历史，和编写springMVC项目所用的关键技术
Backbone基础笔记
aizhanqian5077的博客
01-25 119
之前做一个iPad的金融项目的时候有用到Backbone，不过当时去的时候项目已经进入UAT测试阶段了，就只是改了改Bug，对Backbone框架算不上深入了解，但要说我一点都不熟悉那倒也不是，我不太喜欢这么不尴不尬地将就着，索性学习学习，整理一下好了。 网上的大牛说Backbone适合做大型的项目，小项目用Backbone有那么些杀鸡用牛刀的感觉，我目前的项目组用的是Angul...
遇见狂神说 Spring MVC 学习笔记（完整笔记+代码）
记录一名在读研究生的学习笔记、感悟、开发产物
01-08 1077
狂神课程 Spring MVC 完整学习笔记（附详细代码和操作）
SpringMVC学习笔记整理详细
qq_43431171的博客
06-09 6023
SpringMVC 文章目录SpringMVC1.回顾MVC1.1、什么是MVC1.2、Model1时代1.3、Model2时代1.4、回顾Servlet2、什么是SpringMVC2.1、概述2.2、中心控制器2.3、SpringMVC执行原理3.第一个MVC程序配置版注解版小结4.RestFul和控制器控制器Controller实现Controller接口使用注解@ControllerRequestMappingRestFul 风格扩展：小黄鸭调试法5.数据处理及跳转结果跳转方式ModelAndView
VUE面试题汇总（九）
java_dazhuzhu的博客
04-29 494
VUE面试题汇总（五）VUE面试题汇总（六）VUE面试题汇总（七）VUE面试题汇总（八）81. vue-router 路由的两种模式参考答案：82. history 路由模式与后台的配合参考答案：参考83. vue路由实现原理? 或 vue-router原理?参考答案：说简单点，vue-router的原理就是通过对URL地址变化的监听，继而对不同的组件进行渲染。每当URL地址改变时，就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有hash模式和history模式。如果想了解得详细点，建议百
前端工程师学习路线
前端笔记
05-04 4318
前端工程师学习路线 第一阶段 html+css html进阶、css进阶、div+css布局、html+css整站开发 JS基础 js基础教程、js内置对象常用方法、常见dom树操作大全、ES、DOM、BOM、定时器和焦点图 JS基本特效 常见特效：tab、导航、页面滚动、轮播图、JS制作幻灯片、淡出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 ...
前端面试Vue 高频原理篇+详细解答，还有105道vue面试题集合
2401_84140832的博客
04-19 619
VM：view-model 视图数据模板(vue处理的层，vue 中的definedProperty 就是处理 VM 层的逻辑)单向的数据，用户的每一步操作都需要重新请求数据库来修改视图层的渲染，形成一个单向的闭环。//这里对数组和内部的数组进行递归收集依赖，这里数组的 key 和 value 都有dep。vue 中的生命周期钩子只是一个回调函数，在创建组件实例化的过程中会调用对应的钩子执行。方法采用策略模式针对不同的属性合并。(parser 解析器），这里使用了大量的正则来匹配标签的名称，属性，文本等。
backbone.reactive:Backbone.js 框架的插件，允许将强大的 Backbone.js 与 React.js 视图结合起来
06-25
满足 Backbone.js 系列的插件，它允许将强大的 Backbone.js 与 React.js 视图结合起来。 插件支持 AMD，以及 CommonJS。 所以可以随意使用 require.js 用法 define ( [ "react" , "backbone" , "backbone....
实例讲解JavaScript的Backbone.js框架中的View视图
10-22
在学习JavaScript前端开发框架时，Backbone.js是一个不可忽视的工具，它帮助开发者构建单页面应用(SPA)。Backbone.js框架相对轻量级，它的核心在于模型（Models）、视图（Views）、集合（Collections）和路由...
Backbone.js框架中简单的View视图编写学习笔记
10-22
在Backbone.js中，View是MVC模式中的一个重要组成部分，它负责管理用户界面与模型数据之间的交互。在本文中，我们将深入探讨如何在Backbone.js中...学习和掌握这些基础知识，对于开发复杂的JavaScript应用至关重要。
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1416
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
React中的refs是什么？
Front end development engineer
10-10 352
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
最新发布
m0_66584716的博客
10-11 1319
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
javascript中==和===有什么不同
qq_48763502的博客
10-09 436
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
探秘纯前端Excel表格：构建现金流量表的完整指南
葡萄城技术团队博客
10-10 1080
现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。
vue-自定义指令
Kevin7_35Durant的博客
10-09 489
钩子函数inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。钩子函数参数。
Backbone.js实战秘籍：打造卓越Web应用
1. **Backbone.js介绍**：Backbone.js是一个轻量级的JavaScript库，它提供了一套结构化的框架，用于组织前端代码，帮助开发者遵循MVC模式进行开发。它提供了Model、View、Collection、Router等核心组件，简化了数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值