Backbone seajs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="seajs/sea.js"></script>
<style>
span{display: block;}
#container ul li{list-style-type: none;float: left;padding: 10px; margin-right: 10px;margin-bottom: 10px;}
#container ul li img{display: block;width: 100px;height: 150px;}
#container ul li p{white-space: nowrap;overflow: hidden; width: 100px;text-overflow: ellipsis;}
</style>
</head>
<body>
<div id="container">
<ul></ul>
</div> <!-- template -->
<script type="text/html" id="book-view">
<span class="books">
<img src="<%= image %>" alt="<%= title %>">
<p><a href="<%= alt %>"><%= title %></a></p>
</span>
</script>
<script>
seajs.config({
base: '../example-3',
alias: {
'jquery': 'lib/jquery-latest.js',
'underscore': 'lib/underscore.js',
'backbone': 'lib/backbone.js',
'DemoModel': 'js/DemoModel',
'DemoView': 'js/DemoView',
'DemoCollection': 'js/DemoCollection',
'DemoApp': 'js/DemoApp'
}
}); seajs.use('DemoApp', function (DemoApp) {
new DemoApp();
});
</script>
</body>
</html>
define('DemoModel', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {
'use strict';
var DemoModel = Backbone.Model.extend({
defaults: function () {
return {
id: '',
alt: '',
url: '',
title: '',
image: ''
}
}
});
module.exports = DemoModel;
});
define('DemoCollection', ['jquery', 'underscore', 'backbone', 'DemoModel'], function (require, exports, module) {
'use strict';
var DemoModel = require('DemoModel');
var DemoCollection = Backbone.Collection.extend({
model: DemoModel,
url: 'https://api.douban.com/v2/book/search?q=javascript',
parse: function (response) {
return response.books;
},
sync: function (method, model, options) {
var params = _.extend({
type: 'GET',
dataType: 'jsonp',
url: this.url,
processData: false
}, options);
return $.ajax(params);
}
});
module.exports = DemoCollection;
})
define('DemoView', ['jquery', 'underscore', 'backbone'], function (require, exports, module) {
'use strict';
var DemoView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#book-view').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
module.exports = DemoView;
});
define('DemoApp', ['jquery', 'underscore', 'backbone', 'DemoView', 'DemoCollection'], function (require, exports, module) {
'use strict';
var DemoCollection = require('DemoCollection'),
DemoView = require('DemoView');
var demoCollection = new DemoCollection();
var DemoApp = Backbone.View.extend({
el: 'body',
events: {
},
initialize: function () {
var that = this;
this.listenTo(demoCollection, 'reset', this.render);
demoCollection.fetch({
success: function (e) {
console.log('data');
that.render();
},
error: function (e) {
console.log('Something went wrong!');
}
});
},
render: function () {
demoCollection.each(this.addOne, this);
},
addOne: function (item) {
var view = new DemoView({
model: item
});
$('#container ul').append(view.render().el);
}
});
module.exports = DemoApp;
});
Backbone seajs的更多相关文章
- Backbone seajs demo2
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第四课：seajs的模块编译_compile过程
最近比较闲,我就讲下seajs的模块编译_compile过程. 这里紧接着第三课的例子来讲解.首先是a.js的编译 Module.prototype._compile = function() { 1 ...
- 构建seajs业务模块之grunt VS spm build
在最开始,我并不知道grunt可以构建CMD模块.(以下spm指代spm build) 当时正困惑于如何用spm方便的构建业务模块,后来看到@twinstony (感谢@twinstony的分享)使用 ...
- seajs+spm之再研究
好久没有用seajs了,之前对spm也只是一知半解,这些天再次拿起来研究.谈谈我的认识与理解. 声明:本文不适合对seajs完全不了解的同学阅读.对于想知道seajs来龙去脉以及spm相关的同学&qu ...
- Seajs demo
index.html <!doctype html> <html lang="en"> <head> <meta charset=&quo ...
- Backbone设计思路和关键源码分析
一. Backbone的江湖地位: backbone作为一个老牌js框架为大规模前端开发提供了新的开发思路:前端MVC模式,这个模式也是前端开发演变过程中的一个重要里程碑,也为MVVM和Redux等开 ...
- Backbone.js 的最佳应用场景有哪些？#zhihu#
这段时间,想再次了解下backbone js的相关知识,就把一些认为不错的拿过来了: 新版的有道笔记 Web 版(http://note.youdao.com)也使用了 Backbone.就像其他答案 ...
- [转]seajs详解
[转]seajs详解 SeaJS 是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(kk:模块可按需加载或全部加载). SeaJS ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
随机推荐
- Codeforces Round #353 (Div. 2) D. Tree Construction 二叉搜索树
题目链接: http://codeforces.com/contest/675/problem/D 题意: 给你一系列点,叫你构造二叉搜索树,并且按输入顺序输出除根节点以外的所有节点的父亲. 题解: ...
- Leetcode#123 Best Time to Buy and Sell Stock III
原题地址 最直观的想法就是划分成两个子问题,每个子问题变成了:求在某个范围内交易一次的最大利润 在只能交易一次的情况下,如何求一段时间内的最大利润?其实就是找股价最低的一天买进,然后在股价最高的一天卖 ...
- Android系统Recovery工作原理
Android系统Recovery工作原理之使用update.zip升级过程分析(一)---update.zip包的制作 http://blog.csdn.net/mu0206mu/article/d ...
- StoreKit framework
关于In-APP Purchase 1. 中文文档 基本流程: http://www.cnblogs.com/wudan7/p/3621763.html 三种购买形式及StoreKit code介绍: ...
- Python中的正则表达式regular expression
1 match = re.search(pat,str) If the search is successful, search() returns a match object or None o ...
- python 二分法查找
这个也是之前写的程序,现在把它贴上来 #!/usr/bin/python import os os.system('clear') def binsearch(seq,x,low,high): mid ...
- JQuery表单验证插件EasyValidator,超级简单易用!
本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以 ...
- ubuntu修改ip、网关、dns等
一.使用命令设置Ubuntu IP地址 1.修改配置文件blacklist.conf禁用IPV6 sudo vi /etc/modprobe.d/blacklist.conf 表示用vi编辑器(也可以 ...
- 创建本地yum源及grouplist 出错
RHEL有时候使用自定义的YUM源是很方便的事情. yum install createrepo createrepo /your/repo/directory/ 不过由于粗心,本人在使用时遇到很郁闷 ...
- javascript实现快速排序和二分法查找
1.快速排序: 思路:找到数组中间的元素,把它单拎出来,然后从0开始判断数组中的元素比该基准元素大还是小,小的存左边,大的存右边,然后如此反复递归,得出结果. function quickSort(a ...