Skip to content

T
todomvc
Commit fb246fbf authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Merge pull request #450 from passy/ts-backbone-update 

Ts backbone update
parents 9040e970 81906dc8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1807 additions and 72 deletions
labs/architecture-examples/typescript-backbone/index.html
View file @ fb246fbf
<!-- ---------------------------------------------------------------------------------------
index.html
Microsoft grants you the right to use these script files under the Apache 2.0 license.
Microsoft reserves all other rights to the files not expressly granted by Microsoft,
whether by implication, estoppel or otherwise. The copyright notices and MIT licenses
Microsoft grants you the right to use these script files under the Apache 2.0 license.
Microsoft reserves all other rights to the files not expressly granted by Microsoft,
whether by implication, estoppel or otherwise. The copyright notices and MIT licenses
below are for informational purposes only.
Portions Copyright © Microsoft Corporation
Apache 2.0 License
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations
See the License for the specific language governing permissions and limitations
under the License.
------------------------------------------------------------------------------------------
Provided for Informational Purposes Only
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this
software and associated documentation files (the "Software"), to deal in the Software
without restriction, including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software, and to permit
Permission is hereby granted, free of charge, to any person obtaining a copy of this
software and associated documentation files (the "Software"), to deal in the Software
without restriction, including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies
The above copyright notice and this permission notice shall be included in all copies
or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.
---------------------------------------------------------------------------------------
index.html
https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html
https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html
-->
<!doctype html>
......@@ -106,10 +106,10 @@ https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html
<% } %>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="../../../assets/jquery.min.js"></script>
<script src="../../../assets/lodash.min.js"></script>
<script src="js/libs/backbone/backbone.js"></script>
<script src="js/libs/backbone/backbone.localStorage.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/typescript-backbone/js/app.js
View file @ fb246fbf
......@@ -11,20 +11,20 @@ var Todo = (function (_super) {
}
Todo.prototype.defaults = function () {
return {
content: "empty todo...",
content: '',
done: false
};
};
Todo.prototype.initialize = function () {
if(!this.get("content")) {
if(!this.get('content')) {
this.set({
"content": this.defaults().content
'content': this.defaults().content
});
}
};
Todo.prototype.toggle = function () {
this.save({
done: !this.get("done")
done: !this.get('done')
});
};
Todo.prototype.clear = function () {
......@@ -38,7 +38,7 @@ var TodoList = (function (_super) {
_super.apply(this, arguments);
this.model = Todo;
this.localStorage = new Store("todos-backbone");
this.localStorage = new Store('todos-typescript-backbone');
}
TodoList.prototype.done = function () {
return this.filter(function (todo) {
......@@ -63,13 +63,13 @@ var Todos = new TodoList();
var TodoView = (function (_super) {
__extends(TodoView, _super);
function TodoView(options) {
this.tagName = "li";
this.tagName = 'li';
this.events = {
"click .check": "toggleDone",
"dblclick label.todo-content": "edit",
"click button.destroy": "clear",
"keypress .todo-input": "updateOnEnter",
"blur .todo-input": "close"
'click .check': 'toggleDone',
'dblclick label.todo-content': 'edit',
'click button.destroy': 'clear',
'keypress .todo-input': 'updateOnEnter',
'blur .todo-input': 'close'
};
_super.call(this, options);
this.template = _.template($('#item-template').html());
......@@ -77,6 +77,7 @@ var TodoView = (function (_super) {
this.model.bind('change', this.render);
this.model.bind('destroy', this.remove);
}
TodoView.ENTER_KEY = 13;
TodoView.prototype.render = function () {
this.$el.html(this.template(this.model.toJSON()));
this.input = this.$('.todo-input');
......@@ -86,17 +87,17 @@ var TodoView = (function (_super) {
this.model.toggle();
};
TodoView.prototype.edit = function () {
this.$el.addClass("editing");
this.$el.addClass('editing');
this.input.focus();
};
TodoView.prototype.close = function () {
this.model.save({
content: this.input.val()
});
this.$el.removeClass("editing");
this.$el.removeClass('editing');
};
TodoView.prototype.updateOnEnter = function (e) {
if(e.keyCode == 13) {
if(e.keyCode == TodoView.ENTER_KEY) {
close();
}
};
......@@ -110,16 +111,16 @@ var AppView = (function (_super) {
function AppView() {
_super.call(this);
this.events = {
"keypress #new-todo": "createOnEnter",
"keyup #new-todo": "showTooltip",
"click .todo-clear button": "clearCompleted",
"click .mark-all-done": "toggleAllComplete"
'keypress #new-todo': 'createOnEnter',
'click .todo-clear button': 'clearCompleted',
'click .mark-all-done': 'toggleAllComplete'
};
this.tooltipTimeout = null;
this.setElement($("#todoapp"), true);
this.setElement($('#todoapp'), true);
_.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
this.input = this.$("#new-todo");
this.allCheckbox = this.$(".mark-all-done")[0];
this.input = this.$('#new-todo');
this.allCheckbox = this.$('.mark-all-done')[0];
this.mainElement = this.$('#main')[0];
this.footerElement = this.$('#footer')[0];
this.statsTemplate = _.template($('#stats-template').html());
Todos.bind('add', this.addOne);
Todos.bind('reset', this.addAll);
......@@ -129,18 +130,25 @@ var AppView = (function (_super) {
AppView.prototype.render = function () {
var done = Todos.done().length;
var remaining = Todos.remaining().length;
this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: done,
remaining: remaining
}));
if(Todos.length) {
this.mainElement.style.display = 'block';
this.footerElement.style.display = 'block';
this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: done,
remaining: remaining
}));
} else {
this.mainElement.style.display = 'none';
this.footerElement.style.display = 'none';
}
this.allCheckbox.checked = !remaining;
};
AppView.prototype.addOne = function (todo) {
var view = new TodoView({
model: todo
});
this.$("#todo-list").append(view.render().el);
this.$('#todo-list').append(view.render().el);
};
AppView.prototype.addAll = function () {
Todos.each(this.addOne);
......@@ -165,20 +173,6 @@ var AppView = (function (_super) {
});
return false;
};
AppView.prototype.showTooltip = function (e) {
var tooltip = $(".ui-tooltip-top");
var val = this.input.val();
tooltip.fadeOut();
if(this.tooltipTimeout) {
clearTimeout(this.tooltipTimeout);
}
if(val == '' || val == this.input.attr('placeholder')) {
return;
}
this.tooltipTimeout = _.delay(function () {
return tooltip.show().fadeIn();
}, 1000);
};
AppView.prototype.toggleAllComplete = function () {
var done = this.allCheckbox.checked;
Todos.each(function (todo) {
......
labs/architecture-examples/typescript-backbone/js/app.ts
View file @ fb246fbf
......@@ -143,7 +143,7 @@ class TodoList extends Backbone.Collection {
// Filter down the list to only todo items that are still not finished.
remaining() {
return this.without(this.done());
return this.without.apply(this, this.done());
}
// We keep the Todos in sequential order, despite being saved by unordered
......@@ -178,6 +178,8 @@ class TodoView extends Backbone.View {
model: Todo;
input: any;
static ENTER_KEY:number = 13;
constructor (options? ) {
//... is a list tag.
this.tagName = 'li';
......@@ -200,7 +202,7 @@ class TodoView extends Backbone.View {
this.model.bind('change', this.render);
this.model.bind('destroy', this.remove);
}
w
// Re-render the contents of the todo item.
render() {
this.$el.html(this.template(this.model.toJSON()));
......@@ -227,7 +229,7 @@ w
// If you hit `enter`, we're through editing the item.
updateOnEnter(e) {
if (e.keyCode == 13) close();
if (e.keyCode == TodoView.ENTER_KEY) close();
}
// Remove the item, destroy the model.
......@@ -252,6 +254,8 @@ class AppView extends Backbone.View {
input: any;
allCheckbox: HTMLInputElement;
mainElement: HTMLElement;
footerElement: HTMLElement;
statsTemplate: (params: any) => string;
constructor () {
......@@ -267,6 +271,8 @@ class AppView extends Backbone.View {
this.input = this.$('#new-todo');
this.allCheckbox = this.$('.mark-all-done')[0];
this.mainElement = this.$('#main')[0];
this.footerElement = this.$('#footer')[0];
this.statsTemplate = _.template($('#stats-template').html());
Todos.bind('add', this.addOne);
......@@ -282,11 +288,19 @@ class AppView extends Backbone.View {
var done = Todos.done().length;
var remaining = Todos.remaining().length;
this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: done,
remaining: remaining
}));
if (Todos.length) {
this.mainElement.style.display = 'block';
this.footerElement.style.display = 'block';
this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: done,
remaining: remaining
}));
} else {
this.mainElement.style.display = 'none';
this.footerElement.style.display = 'none';
}
this.allCheckbox.checked = !remaining;
}
......
labs/architecture-examples/typescript-backbone/js/libs/backbone/backbone.localStorage.js 0 → 100644
View file @ fb246fbf
/**
* Backbone localStorage Adapter
* Version 1.1.0
*
* https://github.com/jeromegn/Backbone.localStorage
*/
(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["underscore", "backbone"], function (_, Backbone) {
// Use global variables if the locals are undefined.
return factory(_ || root._, Backbone || root.Backbone);
});
} else {
// RequireJS isn't being used. Assume underscore and backbone are loaded in <script> tags
factory(_, Backbone);
}
}(this, function (_, Backbone) {
// A simple module to replace `Backbone.sync` with *localStorage*-based
// persistence. Models are given GUIDS, and saved into a JSON object. Simple
// as that.
// Hold reference to Underscore.js and Backbone.js in the closure in order
// to make things work even if they are removed from the global namespace
// Generate four random hex digits.
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
// Generate a pseudo-GUID by concatenating random hexadecimal.
function guid() {
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
};
// Our Store is represented by a single JS object in *localStorage*. Create it
// with a meaningful name, like the name you'd give a table.
// window.Store is deprectated, use Backbone.LocalStorage instead
Backbone.LocalStorage = window.Store = function (name) {
this.name = name;
var store = this.localStorage().getItem(this.name);
this.records = (store && store.split(",")) || [];
};
_.extend(Backbone.LocalStorage.prototype, {
// Save the current state of the **Store** to *localStorage*.
save: function () {
this.localStorage().setItem(this.name, this.records.join(","));
},
// Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
// have an id of it's own.
create: function (model) {
if (!model.id) {
model.id = guid();
model.set(model.idAttribute, model.id);
}
this.localStorage().setItem(this.name + "-" + model.id, JSON.stringify(model));
this.records.push(model.id.toString());
this.save();
return this.find(model);
},
// Update a model by replacing its copy in `this.data`.
update: function (model) {
this.localStorage().setItem(this.name + "-" + model.id, JSON.stringify(model));
if (!_.include(this.records, model.id.toString()))
this.records.push(model.id.toString()); this.save();
return this.find(model);
},
// Retrieve a model from `this.data` by id.
find: function (model) {
return this.jsonData(this.localStorage().getItem(this.name + "-" + model.id));
},
// Return the array of all models currently in storage.
findAll: function () {
return _(this.records).chain()
.map(function (id) {
return this.jsonData(this.localStorage().getItem(this.name + "-" + id));
}, this)
.compact()
.value();
},
// Delete a model from `this.data`, returning it.
destroy: function (model) {
if (model.isNew())
return false
this.localStorage().removeItem(this.name + "-" + model.id);
this.records = _.reject(this.records, function (id) {
return id === model.id.toString();
});
this.save();
return model;
},
localStorage: function () {
return localStorage;
},
// fix for "illegal access" error on Android when JSON.parse is passed null
jsonData: function (data) {
return data && JSON.parse(data);
}
});
// localSync delegate to the model or collection's
// *localStorage* property, which should be an instance of `Store`.
// window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function (method, model, options) {
var store = model.localStorage || model.collection.localStorage;
var resp, errorMessage, syncDfd = $.Deferred && $.Deferred(); //If $ is having Deferred - use it.
try {
switch (method) {
case "read":
resp = model.id != undefined ? store.find(model) : store.findAll();
break;
case "create":
resp = store.create(model);
break;
case "update":
resp = store.update(model);
break;
case "delete":
resp = store.destroy(model);
break;
}
} catch (error) {
if (error.code === DOMException.QUOTA_EXCEEDED_ERR && window.localStorage.length === 0)
errorMessage = "Private browsing is unsupported";
else
errorMessage = error.message;
}
if (resp) {
model.trigger("sync", model, resp, options);
if (options && options.success)
if (Backbone.VERSION === "0.9.10") {
options.success(model, resp, options);
} else {
options.success(resp);
}
if (syncDfd)
syncDfd.resolve(resp);
} else {
errorMessage = errorMessage ? errorMessage
: "Record Not Found";
model.trigger("error", model, errorMessage, options);
if (options && options.error)
if (Backbone.VERSION === "0.9.10") {
options.error(model, errorMessage, options);
} else {
options.error(errorMessage);
}
if (syncDfd)
syncDfd.reject(errorMessage);
}
// add compatibility with $.ajax
// always execute callback for success and error
if (options && options.complete) options.complete(resp);
return syncDfd && syncDfd.promise();
};
Backbone.ajaxSync = Backbone.sync;
Backbone.getSyncMethod = function (model) {
if (model.localStorage || (model.collection && model.collection.localStorage)) {
return Backbone.localSync;
}
return Backbone.ajaxSync;
};
// Override 'Backbone.sync' to default to localSync,
// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
Backbone.sync = function (method, model, options) {
return Backbone.getSyncMethod(model).apply(this, [method, model, options]);
};
return Backbone.LocalStorage;
}));
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7