backbone template 使用model

2024-11-03

Backbone.js 中使用 Model

前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了.现在来学习怎么创建自己的 Model 类,并简单的使用.Backbone.js 中 Model 会涉及到很多的概念,如 Model 的初始化,默认值,属性的读写,属性值改变的监听,数据渲染,校验,以及与服务端的数据同步等. 本文不打算讲前面大部分的内容,最初思考的一个脉络是怎么把 Model 引入进来,所以线索会是建立 Model 类 -> 初始化 Model 实例 ->

[Backbone.js]如何处理Model里面嵌入的Collection?

写了近半个月的backbone.js代码,从一开始的todo到现在做仿微信的网页聊天,其中最大的困惑就在于如何处理比较复杂的Model,其内嵌了一个或者多个Collections. 假设我们有一个Person的Model,一个Person会有多个工作,那么我们将jobs这个属性设置为一个Collection: 初始化代码如下: var Job = Backbone.Model.extend({ }); var Jobs = Backbone.Collection.extend({ model:J

Backbone.js之model篇(一)

Backbone.js之model篇(一) Backbone 是一个前端 JS 代码 MVC 框架,它不可取代 Jquery,不可取代现有的 template 库.而是和这些结合起来构建复杂的 web 前端交互应用. Backbone 主要包括 models, collections, views 和 events, controller. (一)model 关于 backbone,最基础的一个东西就是 model,这个东西就像是后端开发中的数据库映射那个 model 一样,也是数据对象的模型,

Backbone中的model和collection在做save或者create操作时，如何选择用POST还是PUT方法？

Model和Collection和后台的WEB server进行数据同步非常方便, 都只需要在实行里面添加一url就可以了,backbone会在model进行save或者collection进行create时,自动将数据用POST或者PUT方式通过该url发送到后端.按照POST和PUT的含义,backbone采用的原则是: 如果model数据为一个全新的实例,则使用POST请求:如果model数据是一个已经存在的实例, 单需要修改实例属性,则采用PUT请求. 所以,问题的关键是,backbon

Backbone学习笔记 - Model篇

2 Model 在Backbone中,Model用于存储核心数据,可以将数据交互相关的逻辑代码放在这里.基本形式如下: var Human = Backbone.Model.extend({ initialize: function(){ alert("Welcome to this world"); } }); var human = new Human(); 设置属性(两种形式) var human = new Human({ name: "Thomas", a

backbone库学习-model

backbone库的结构: http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文所有例子来自于http://blog.csdn.net/eagle_110119/article/details/8842007 1.1 先看model块的结构 var Model = Backbone.Model = function(attributes, options){} _.extend(Model.prototype, Ev

Backbone之旅——Model篇

Backbone作为前端的MVC框架,把后端的设计思想带到前端,使前端代码更加清晰.可维护性大大提高 Backbone依赖于underscore.js和jquery,所以在使用backbone的时候一定要引入这两个常用的js库,jquery应该算是web前端的标配了吧,undersocre也是一个很通用的库,在nodejs中同样也使用.此处有个坑,三个js库的引用是有顺序的,jquery.underscore.backbone一定要按照这个顺序,并且所有的js要放到body的后面也就是页面的底部

backbone.js之Model篇简单总结和深入(2)

一.模型属性的一些操作方法 1.mmodel.get() 获取属性的值 2.mmodel.set('age',5) 更新单个属性的值 mmodel.set({name:'aaa',age:6}) 更新多个属性的值在设置属性值时,如果该属性不存在,会自动创建该属性:同时会以true的形式返回一个模型的引用. 3.mmodel.unset('age') 从模型中删除一个属性 4.mmodel.clear() 从模型中删除所有的属性 5.mmodel.has('age') 检查是否存在某

backBone.js之Model篇 (1) 简单实例

“Model是js应用的核心,包括基础的数据以及围绕着这些数据的逻辑:数据转换.验证.属性计算和访问控制”. 一.初始化方法我们先来看一个demo,initialize,这是一个初始化方法,但是写这段代码之前,首先要在<head>元素中导入3个相应的库文件,即jQuery框架.Backbone主框架和依赖库Underscore.需要注意它们导入页面的顺序,由于代码是按照自上而下的顺序进行执行的,因此先导入jQuery框架文件:Backbone依赖于Underscore库,因此在导入Under

【再探backbone 01】模型-Model

前言点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由的#改为其他我其实想说这个不能乱改,又怕不熟悉误人子弟,所以今天我们来一起重新学习下他,看看会不会带来不一样的感觉我在博客园nuysoft的博客看到了backbone的分析,可惜没有写完,不失为一个遗憾,希望作者坚持下去,水平高得贡献出来哟(@nuysoft) 然后,网上backbone基础用法

使用Underscore.js的template将Backbone.js的js代码和html代码分离

这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去,这似乎不是一件非常好的事情,因为将js代码和html代码融合到一起会增加代码的维护难度,而且这个过程中考虑到性能的因素,需要将HTML代码放到一个数组中,最后进行拼接,代码写起来比较麻烦.我看到他们的代码之后就在考虑是否有一种类似php模板引擎的东西可以将Collection传递进去然后渲染. 我

[Backbone]5. Model & View, toggle between Models and Views -- 2

Dr. Goodparts is pretty flaky and has been cancelling a lot of appointments lately. He's asked for an easy, one-click way to cancel an appointment in the app you are building. Add a link to the AppointmentView template that, when clicked, will set it

backbone.js 教程(1) View & Model & Collection

Backbone.js Overview 它由Jeremy Ashkenas开发,最初发行于2010-10-13 它是一个轻量的JavaScript类库,只依赖于underscore.js,非强制依赖于jquery,大小只有7.6Kb,作为一个框架级的js文件,它已经非常小了它提供了Model-View-Presenter(MVP)的框架模式,可以帮助前端开发搭建一个层次清晰的Web应用框架它提供了models和collections来封装数据结构,提供了views来操作DOM,提供了自定义

Backbone.js 中的Model被Destroy后，不能触发success的一个原因

下面这段代码中, 当调用destroy时,backbone会通过model中的url,向服务端发起一个HTTP DELETE请求, 以删除后台数据库中的user数据. 成功后,会回调触发绑定到destroy的success()方法.但数据库已经成功删除,也未报任何异常,但前端JS的success始终不能触发. User = Backbone.Model.extend({ initialize: function(user) { ... ... }, url:"/user/xxx", }

Backbone Model——数据模型

Model是Backbone中所有数据模型的基类,用于封装原始数据,并提供对数据进行操作的方法,我们一般通过继承的方式来扩展和使用它. 如果你做过数据库开发,可能对ORM(对象关系映射)不会陌生,而Backbone中的Model就像是映射出来的一个数据对象,它可以对应到数据库中的某一条记录,并通过操作对象,将数据自动同步到服务器数据库.(下一节即将介绍的Collection就像映射出的一个数据集合,它可以对应到数据库中的某一张或多张关联表). 1.1 创建数据模型我们先通过一段代码来看看如何创建

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

注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈更详细的说明: 模型(Mod

RequireJS与Backbone简单整合

前言昨天我们一起学习了Backbone,最后做了一个备忘录的例子,说是做了不如说是看了下官方提供的例子,所以最终我感觉我们还是没能掌握Backbone,今天还得做个其它例子先. 然后前面也只是草草学习了RequireJS,没做demo,这个周末又在看电影打游戏睡觉瞎折腾,转眼就周日下午了,突然诗性大起,于是作诗一首先: 古有通宵看A片,今有彻夜码代码好吧,我们开始今天的学习吧,我们今天先用backbone做一个通讯录的东西,然后使用requireJS组装之. 部分参考:the5fire的技术

我对Backbone.js的一些认识

backbone.js已经不是当前最流行的前端框架了,但是对于我而言,依然具有比较好的学习价值.虽然目前来说,react,vue等mvvm框架非常火热,但是感觉自身还不到去使用这种框架的层次.这些技术虽好,但是对个人的挑战也是比较大:首先是在编程基础这个部分,包括数据结构,算法,面向对象编程,设计模式,设计原则等等,我觉得在这些方面积累地还不够:其次是工作方法层面,对比angualr,react以及vue,跟传统的用原生js或者jquery写的代码,包括html,css和js三个方面,你会发现这

backbone学习总结（二）

今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理通过 Backbone.Router.extend 来创建路由模型,链接到不同的指定的动作和事件.当应用已经全部链接到路由时,需利用Backbone.history.start() 或者Backbone.history.start({pushState: true}) 来确保驱动初始化 URL 的路由. 我们来

实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室

一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间三.前端制作这里没有用到Backbone的Router,因为这里不需要记录hash记录 1.Div+CSS制作静态页面,这里item-template为每一个发言的模版 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <

backbone template 使用model

热门专题