Html5移动开发论坛

注册

 

发新话题 回复该主题

关于Backbone.localstorage.js如何存取 [复制链接]

1#
由于lz是从Sencha Touch转而开始原生Html5开发的,因此对于ST的MVC框架格外的喜欢那种将数据封装到store的做法,而backbone也借鉴了这种做法,因此我们可以使用backbone来实现sencha的那种model-store-view的做法,而这些数据都是存在于localstorage的,只要不要代码或者插件是无法清除的。前提条件按照todo 的example配有backbone的框架以及引用backbone.localstorage.js

要实现存取首先我们在backbones来定义一个Model——InfoImg.js
  1. define(function(require, exports, module){
  2.     var Backbone = require('backbone');
  3.     var InfoImg = Backbone.Model.extend({

  4.         // Default attributes for the todo item.
  5.         defaults: function() {
  6.             return {
  7.                 Id: "0",
  8.                 Created_at: (new Date()).format("yyyy-MM-dd hh:mm:ss"),
  9.                 Retweeted_status: "resources/images/nodata.png",
  10.                 Text:"亲,暂时没有数据哦",
  11.                 Name:"CF西西工作室",
  12.                 UserId:"-1"
  13.             };
  14.         },

  15.         // Ensure that each todo created has `title`.
  16.         initialize: function() {
  17.             if (!this.get("Id")) {
  18.                 this.set({"Id": this.defaults().Id});
  19.             }

  20.             if (!this.get("Created_at")) {
  21.                 this.set({"Created_at": this.defaults().Created_at});
  22.             }

  23.             if (!this.get("Retweeted_status")) {
  24.                 this.set({"Retweeted_status": this.defaults().Retweeted_status});
  25.             }

  26.             if (!this.get("Text")) {
  27.                 this.set({"Text": this.defaults().Text});
  28.             }

  29.             if (!this.get("Name")) {
  30.                 this.set({"Name": this.defaults().Name});
  31.             }

  32.             if (!this.get("UserId")) {
  33.                 this.set({"UserId": this.defaults().UserId});
  34.             }

  35.         }

  36.     });

  37.     module.exports = InfoImg;
  38. });
复制代码
其次我们定义一个collection(store)——InfoImgStore.js
  1. /**
  2. * Created with JetBrains WebStorm.
  3. * User: ChenFeng
  4. * Date: 13-4-27
  5. * Time: 下午2:28
  6. * To change this template use File | Settings | File Templates.
  7. */

  8. define(function(require, exports, module){
  9.     var Backbone, InfoImg;

  10.     Backbone = require('backbone');
  11.     require('../libs/backbone.localStorage');

  12.     var $ = require('jquery');
  13.     var _ = require('underscore');

  14.     InfoImg = require('../model/InfoImg');


  15.     var InfoImgStore = Backbone.Collection.extend({

  16.         // Reference to this collection's model.
  17.         model: InfoImg,

  18.         // Save all of the todo items under the `"todos-backbone"` namespace.
  19.         localStorage: new Backbone.LocalStorage("cfxixi-XiXiInfo-Img"),

  20.         // Filter down the list of all todo items that are finished.
  21.         done: function() {
  22.             return this.filter(function(todo){ return todo.get('Id'); });
  23.         },

  24.         // Filter down the list to only todo items that are still not finished.
  25.         remaining: function() {
  26.             return this.without.apply(this, this.done());
  27.         }

  28.     });

  29.     module.exports = new InfoImgStore();
  30. })
复制代码
然后就是在框架中调用了:
调用时需要引用:
  1. var weiboStore = require('../store/InfoImgStore')
复制代码
存数据时用法:
  1. weiboStore.create({id:imgId,Created_at:imgCreated_at,Retweeted_status:imgUrl,
  2.                     Text:imgText,Name:imgName,UserId:userId});
复制代码
取数据时:
  1. weiboStore.localStorage.find({id:'3628622776303138'});
复制代码
取出全部时:
  1. weiboStore.localStorage.find({id:'3628622776303138'});
复制代码
如此就便能实现对localstorge的轻松操作了
分享 转发

Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。
PhoneGap安卓 交流 QQ 群 250395324欢迎您的加入。
Html5 APP 交流 QQ 群 273843464欢迎您的加入。
TOP
2#

感谢分享,学习了。
TOP
发新话题 回复该主题