CFXIXI工作室首页
CF西西的博客 | Backbones

backbones.localStorage清除数据方法

18. 二月 2014
将整个collection中的数据条目删除 weiboStore.each(function(model) { model.destroy(); } )

Backbones, javascript

backbones使用collection请求tweet数据

20. 八月 2013
 参考:http://jsfiddle.net/Atinux/v4K6A/ JS 模板代码 <!-- Template of the Tweets View --> <script type="text/template" id="tweetsTemplate"> <% _.each(tweets, function (tweet) { %> <div class="tweet"> <p>@<%= tweet.from_user %></p> <p class="text"><%= tweet.text %></p><p><%= tweet.location %></p> </div> <% }); %> </script>   css代码: .tweet { background: rgb(245,245,245); border-bottom: 1px rgb(200,200,200) solid; padding: 5px; } .text { color: rgb(80,80,80); }   js逻辑 // Define the model Tweet = Backbone.Model.extend(); // Define the collection Tweets = Backbone.Collection.extend( { model: Tweet, // Url to request when fetch() is called url: 'http://search.twitter.com/search.json?q=Hamburg&rpp=5&lang=all', parse: function(response) { return response.results; }, // Overwrite the sync method to pass over the Same Origin Policy sync: function(method, model, options) { var that = this; var params = _.extend({ type: 'GET', dataType: 'jsonp', url: that.url, processData: false }, options); return $.ajax(params); } }); // Define the View TweetsView = Backbone.View.extend({ initialize: function() { _.bindAll(this, 'render'); // create a collection this.collection = new Tweets; // Fetch the collection and call render() method var that = this; this.collection.fetch({ success: function () { that.render(); } }); }, // Use an extern template template: _.template($('#tweetsTemplate').html()), render: function() { // Fill the html with the template and the collection $(this.el).html(this.template({ tweets: this.collection.toJSON() })); } }); var app = new TweetsView({ // define the el where the view will render el: $('body') });  

BackBoneJS, Backbones

backbone中的Router实例

17. 七月 2013
参考:http://the5fire.com/5-backbone-router.html 关于这个router的使用,我现在依然是心存疑惑的。每点击一次这样的链接 <a href="#action">action</a>会触发一个事件,但是url也会改变,这样刷性的话,岂不是会自动触发事件。或者这个东西只是用在单个页面的网站上,或者移动设备网站上,或者是我还不会用。 大概解释下Router: Backbone中的router,见名知意,router有路由的意思,显然这里是要控制url的。 Backbone.Router会把你连接中的#标签当做是url路径 即便我心存疑惑,依然是要写几个例子测试一下的。毕竟实践才能解惑。 1、一个简单的例子 var AppRouter = Backbone.Router.extend({ routes: { "*actions" : "defaultRoute" }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start(); 需要通过调用Backbone.history.start()方法来初始化这个Router 这个Router的使用很像是django的urlconf文件提供的功能,如果你懂得django的话。 在页面上需要有这样的a标签: <a href="#actions">testActions</a> 2、这个routes映射要怎么传参数呢 看下面例子,立马你就知道了 var AppRouter = Backbone.Router.extend({ routes: { "/posts/:id" : "getPost", "*actions" : "defaultRoute" }, getPost: function(id) { alert(id); }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start(); 对应的页面上应该有一个超链接: <a href="#/posts/120">Post 120</a> 从上面已经可以看到匹配#标签之后内容的方法,有两种:一种是用“:”来把#后面的对应的位置作为参数;还有一种是“*”,它可以匹配所有的url,下面再来演练一下。 var AppRouter = Backbone.Router.extend({ routes: { "/posts/:id" : "getPost", "/download/*path": "downloadFile", //对应的链接为<a href="#/download/user/images/hey.gif">download gif</a> "/:route/:action": "loadView", //对应的链接为<a href="#/dashboard/graph">Load Route/Action View</a> "*actions" : "defaultRoute" }, getPost: function(id) { alert(id); }, defaultRoute : function(actions){ alert(actions); }, downloadFile: function( path ){ alert(path); // user/images/hey.gif }, loadView: function( route, action ){ alert(route + "_" + action); // dashboard_graph } }); var app_router = new AppRouter; Backbone.history.start(); 总结,router的使用看起来能够去除通过对dom节点的绑定来触发事件的那种繁琐,但唯一让我觉得不爽的就是点击之后如果再刷新,就会重新执行一遍对应的方法,因为url已经变了。或许这个也是可以解决的问题,只是我还没有发现。 另外,在其他的模块中(指:model,view,collection),也可以通过使用routes:{}来根据链接触发函数。 下面给出完整的代码,注释自己去掉试验: <!DOCTYPE html> <html> <head> <title>the5fire-backbone-router</title> </head> <body> <a href="#/posts/120">Post 120</a> <a href="#/download/user/images/hey.gif">download gif</a> <a href="#/dashboard/graph">Load Route/Action View</a> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> <script> (function ($) { //Backbone中的router,见名知意,router有路由的意思,显然这里是要控制url的。 //Backbone.Router会把你连接中的#标签当做是url路径 /** //1、来看一个简单的例子 var AppRouter = Backbone.Router.extend({ routes: { "*actions" : "defaultRoute" }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start(); //2、既然是对url进行匹配那么它应该不仅仅只是简单的静态匹配,应该具有传递参数的功能,所以下面再来一个动态的router的例子. var AppRouter = Backbone.Router.extend({ routes: { "/posts/:id" : "getPost", "*actions" : "defaultRoute" }, getPost: function(id) { alert(id); }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start(); **/ //从上面已经可以看到匹配#标签之后内容的方法,有两种:一种是用“:”来把#后面的对应的位置作为参数;还有一种是“*”,它可以匹配所有的url,下面再来演练一下。 var AppRouter = Backbone.Router.extend({ routes: { "/posts/:id" : "getPost", "/download/*path": "downloadFile", //对应的链接为<a href="#/download/user/images/hey.gif">download gif</a> "/:route/:action": "loadView", //对应的链接为<a href="#/dashboard/graph">Load Route/Action View</a> "*actions" : "defaultRoute" }, getPost: function(id) { alert(id); }, defaultRoute : function(actions){ alert(actions); }, downloadFile: function( path ){ alert(path); // user/images/hey.gif }, loadView: function( route, action ){ alert(route + "_" + action); // dashboard_graph } }); var app_router = new AppRouter; Backbone.history.start(); })(jQuery); </script> </html>  

Backbones

backbones存取localstorage

2. 七月 2013
userFundInfoStore.create({ customerNo: "", customerName: customerName, bankRate: bankRate, charge: "", fastCashMax: "", fastCashMaxOne: "", fastCashMinOne: "", supportList: "", totalBalance: "", avBalance: "", floatBenefit: floatBenefit, sumBenefit: sumBenefit, unAvBalance: "", currentFundCode: "", currentFundName: "", time: "" });

Backbones

关于BackBones Routes简单用法

9. 六月 2013
定义两个方法举例:使用url:index.html#/active routes: {                '*filter': 'setFilter'                },                setFilter: function (param) {                           console.log(param); //active                }        } 举例:使用url:index.html#docs/faq/installing routes: {              '*docs/:section(/:subsection)':'aaa'            },        aaa:function(param,param1,param2){            console.log(param); //docs            console.log(param1); //faq            console.log(param2); //installing        }

Backbones