Download as PDF, PPTX
![localForage
var users = [
{id: 1, fullName: 'Matt'},
{id: 2, fullName: 'Bob'}
];
localForage.setItem('users', users,
function(result) {
console.log(result);
});
16
https://github.com/mozilla/localForage](https://image.slidesharecdn.com/20140419devconkyoto-140419100709-phpapp02/85/Web-16-320.jpg)
![IndexedDB
// IndexedDB.
var db;
var dbName = "dataspace";
var users = [ {id: 1,
fullName: 'Matt'}, {id: 2,
fullName: 'Bob'} ];
var request =
indexedDB.open(dbName, 2);
request.onerror =
function(event) {
// Handle errors.
};
request.onupgradeneeded =
function(event) {
db =
event.target.result;
var objectStore =
db.createObjectStore("users
", { keyPath: "id" });
objectStore.createIndex("fu
llName", "fullName",
{ unique: false });
objectStore.transaction.onc
omplete = function(event) {
var userObjectStore
= db.transaction("users",
"readwrite").objectStore("u
sers");
}
};
// Once the database is
created, let's add our user
to it...
var transaction =
db.transaction(["users"],
"readwrite");
// Do something when all
the data is added to the
database.
transaction.oncomplete =
function(event) {
console.log("All
done!");
};
transaction.onerror =
function(event) {
// Don't forget to
handle errors!
};
var objectStore =
transaction.objectStore("us
ers");
for (var i in users) {
var request =
objectStore.add(users[i]);
request.onsuccess =
function(event) {
// Contains our
user info.
console.log(event.target.re
sult);
};
}
17](https://image.slidesharecdn.com/20140419devconkyoto-140419100709-phpapp02/85/Web-17-320.jpg)
![RequireJS
define(["jquery", "backbone"],
function($, Backbone){
var model = Backbone.Model.exntend({
initialize: function(){
}
});
return model;
});
23](https://image.slidesharecdn.com/20140419devconkyoto-140419100709-phpapp02/85/Web-23-320.jpg)
More Related Content
Web∩アプリ
- 1. Web∩アプリ Mozilla Japan テクニカルマーケティング 清水智公(nshimizu@mozilla-japan.org) Firefox Developers Conference 2014 in Kyoto 2014/04/19
- 2.
- 3. 清水智公（しみずのりただ） • Mozilla Japan テクニカルマーケティング • 慶應義塾大学 政策・メディア研究科非常勤 • ＠chikoski • https://slideshare.net/chikoski/ 3
- 4.
- 5.
- 6. スタブコードの生成：Yeomanの場合 % npm install-g yo % npm install -g generator-firefoxos % mkdir myApp % cd myApp % yo firefoxos 6
- 7. スタブコードの生成：volojsの場合 % npm install-g volo % volo create myApp mozilla/motor-app-stab 7 http://volojs.org/
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. var DocumentRow =Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, initialize: function() { this.listenTo(this.model, "change", this.render); }, render: function() { ... } }); 13
- 14. Ember.js App.ApplicationController = Ember.Controller.extend({ //the initial value of the `search` property search: '', ! actions: { query: function() { // the current value of the text field var query = this.get('search'); this.transitionToRoute('search', { query: query }); } } }); 14
- 15.
- 16. localForage var users =[ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ]; localForage.setItem('users', users, function(result) { console.log(result); }); 16 https://github.com/mozilla/localForage
- 17. IndexedDB // IndexedDB. var db; vardbName = "dataspace"; var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ]; var request = indexedDB.open(dbName, 2); request.onerror = function(event) { // Handle errors. }; request.onupgradeneeded = function(event) { db = event.target.result; var objectStore = db.createObjectStore("users ", { keyPath: "id" }); objectStore.createIndex("fu llName", "fullName", { unique: false }); objectStore.transaction.onc omplete = function(event) { var userObjectStore = db.transaction("users", "readwrite").objectStore("u sers"); } }; // Once the database is created, let's add our user to it... var transaction = db.transaction(["users"], "readwrite"); // Do something when all the data is added to the database. transaction.oncomplete = function(event) { console.log("All done!"); }; transaction.onerror = function(event) { // Don't forget to handle errors! }; var objectStore = transaction.objectStore("us ers"); for (var i in users) { var request = objectStore.add(users[i]); request.onsuccess = function(event) { // Contains our user info. console.log(event.target.re sult); }; } 17
- 18.
- 19.
- 20.
- 21. X-Tag：カスタムコンポーネントの定義 xtag.register('x-status-hud', { lifecycle: { created:function(){ } }, methods: { show: function (){ this.visible = true; }, hide: function (){ this.visible = false; } }, }); // End tag declaration 21
- 22.
- 23. RequireJS define(["jquery", "backbone"], function($,Backbone){ var model = Backbone.Model.exntend({ initialize: function(){ } }); return model; }); 23
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.