Permalink
Browse files

update examples

  • Loading branch information...
1 parent 1b4fa31 commit 9fe37f19aa31ff378196d370af33d7d4736cc535 @defunctzombie defunctzombie committed Mar 4, 2014
View
@@ -10,8 +10,6 @@
}
</style>
-<script src="../build/build.js"></script>
-
<h1>Autosubmit</h1>
<p>Auto-submit a form with XHR via its action and method:</p>
@@ -24,22 +22,19 @@
</form>
</div>
-<script>
- var reactive = require('reactive');
-
- // bind
+<script src="./reactive.js"></script>
- var view = reactive(document.querySelector('.login'));
+<script>
+var view = reactive(document.querySelector('.login'));
- // custom binding available to this view only
+// custom binding available to this view only
- view.bind('autosubmit', function(el){
+view.bind('autosubmit', function(el){
el.onsubmit = function(e){
- e.preventDefault();
- var path = el.getAttribute('action');
- var method = el.getAttribute('method').toUpperCase();
- console.log('submit to %s %s', method, path);
+ e.preventDefault();
+ var path = el.getAttribute('action');
+ var method = el.getAttribute('method').toUpperCase();
+ console.log('submit to %s %s', method, path);
}
- });
-
+});
</script>
View
@@ -10,7 +10,6 @@
}
</style>
-<script src="../build/build.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
@@ -19,38 +18,48 @@
<p>You are {age || 0} years old</p>
</div>
+<script src="./reactive.js"></script>
<script>
- var reactive = require('reactive');
- var User = Backbone.Model.extend();
- var user = new User({
+var User = Backbone.Model.extend();
+var user = new User({
name: 'Matt',
age: 24
- });
+});
- // simplified backbone adapter
+// simplified backbone adapter
- reactive.subscribe(function(obj, prop, fn) {
- obj.on('change:' + prop, fn);
- });
+var Adapter = function(model) {
+ if (!(this instanceof Adapter)) {
+ return new Adapter(model);
+ }
- reactive.set(function(obj, prop, val) {
- obj.set(prop, val);
- });
+ var self = this;
+ self.model = model;
+};
- reactive.get(function(obj, prop) {
- return obj.get(prop);
- });
+Adapter.prototype.subscribe = function(prop, fn) {
+ this.model.on('change:' + prop, fn);
+};
- // bind
+Adapter.prototype.set = function(prop, val) {
+ this.model.set(prop, val);
+};
- var el = document.querySelector('.view');
- reactive(el, user)
+Adapter.prototype.get = function(prop) {
+ return this.model.get(prop);
+};
- setTimeout(function() {
+// bind
+
+var el = document.querySelector('.view');
+reactive(el, user, {
+ adapter: Adapter
+})
+
+setTimeout(function() {
user.set({
- name: 'Ted',
- age: 36
+ name: 'Ted',
+ age: 36
});
- }, 2000);
-
+}, 2000);
</script>
View
@@ -10,8 +10,6 @@
}
</style>
-<script src="../build/build.js"></script>
-
<form>
<label>
title:
@@ -23,24 +21,20 @@
</label>
</form>
+<script src="./reactive.js"></script>
<script>
- var Emitter = require('emitter');
- var reactive = require('reactive');
-
- function Item(title) {
- this.title = title;
- this.complete = true;
- }
-
- Emitter(Item.prototype);
+var reactive = require('reactive');
+function Item(title) {
+ this.title = title;
+ this.complete = true;
+}
- var item = new Item('Get groceries');
- var el = document.querySelector('form');
- reactive(el, item);
+var item = new Item('Get groceries');
+var el = document.querySelector('form');
+var view = reactive(el, item);
- setTimeout(function(){
- item.complete = false;
- item.emit('change complete', false);
- }, 1000);
+setTimeout(function(){
+ view.set('complete', false);
+}, 1000);
</script>
View
@@ -1,66 +0,0 @@
-
-<style>
- body {
- padding: 50px;
- font: 14px Helvetica, Arial;
- }
- .hide {
- display: none;
- }
-</style>
-
-<script src="../build/build.js"></script>
-
-<h1>Computed</h1>
-
-<p>Computed properties demonstration.</p>
-
-<div id="user">
- <div data-hide="removed < removed_at">
- <p>first: <em data-text="first"></em></p>
- <p>last: <em data-text="last"></em></p>
- <p>full: <em data-text="fullname < first last"></em></p>
- </div>
-</div>
-
-<script>
- var reactive = require('reactive');
- var Emitter = require('component-emitter');
-
- function User(first, last) {
- this.first = first;
- this.last = last;
- this.removed_at = null;
- }
-
- Emitter(User.prototype);
-
- User.prototype.removed = function(){
- return !! this.removed_at;
- };
-
- User.prototype.fullname = function(){
- return this.first + ' ' + this.last;
- };
-
- var user = new User('Tobi', 'Ferret');
-
- var el = document.querySelector('#user');
- reactive(el, user);
-
- setTimeout(function(){
- user.first = 'Loki';
- user.emit('change first');
- }, 2000);
-
- setTimeout(function(){
- user.last = 'Holowaychuk';
- user.emit('change last');
- }, 4000);
-
- setTimeout(function(){
- user.removed_at = new Date;
- user.emit('change removed_at');
- }, 6000);
-
-</script>
View
@@ -10,13 +10,12 @@
}
</style>
-<script src="../build/build.js"></script>
-
<article>
<h1>{ title || 'Untitled' }</h1>
<p>{ description.slice(0, 5) }</p>
</article>
+<script src="./reactive.js"></script>
<script>
var Emitter = require('emitter');
var reactive = require('reactive');
View
@@ -10,8 +10,6 @@
}
</style>
-<script src="../build/build.js"></script>
-
<h1>Editable</h1>
<p>Click any of the items below to edit inline:</p>
@@ -22,21 +20,14 @@
<li data-editable='/item/3'>Three</li>
</ul>
+<script src="./reactive.js"></script>
<script>
- var reactive = require('reactive');
-
- // custom binding, available to all reactive views
-
- reactive.bind('data-editable', function(el, url){
+ var view = reactive(document.querySelector('ul'));
+ view.bind('data-editable', function(el, url){
el.setAttribute('contenteditable', 'true');
el.onblur = function(){
var str = el.textContent;
console.log('save "%s" to %s', str, url);
};
});
-
- // bind
-
- reactive(document.querySelector('ul'));
-
</script>
View
@@ -11,8 +11,6 @@
}
</style>
-<script src="../build/build.js"></script>
-
<div id="pet">
<h2 data-text="name"></h2>
<p><span data-text="name">name</span> is a <span data-text="age">age</span> year old <span data-text="species"></span>, he has {friends.length} friends.</p>
@@ -31,6 +29,7 @@ <h2 data-text="name"></h2>
</p>
</form>
+<script src="./reactive.js"></script>
<script>
var Emitter = require('emitter');
var reactive = require('reactive');
View
@@ -10,16 +10,13 @@
}
</style>
-<script src="../build/build.js"></script>
-
<div id="user">
- <h2 data-text="first"></h2>
- <p><span data-text="fullname"></span> was born on <span data-text="birthdate | date:'%Y %d'"></span>. Check out his webpage at <a data-href="url" data-text="url | remove_protocol"></a></p>
+ <h2>{first}</h2>
+ <p><span>{fullname}</span> was born on <span data-date="birthdate" format="%Y %d"></span>. Check out his webpage at <a href="{url}" data-url-text="url"></a></p>
</div>
+<script src="./reactive.js"></script>
<script>
- var Emitter = require('component-emitter');
- var reactive = require('reactive');
var tmpl = document.querySelector('#user');
var user = {
@@ -29,27 +26,36 @@ <h2 data-text="first"></h2>
slug: 'loki'
};
- Emitter(user);
-
function UserView(user) {
this.user = user;
- reactive(tmpl, user, this);
+ var view = reactive(tmpl, user, {
+ delegate: this
+ });
+ view.bind('data-date', function(el, prop) {
+ var binding = this;
+
+ var format = el.getAttribute('format');
+ binding.change(function() {
+ var date = binding.value(prop);
+ el.textContent = format
+ .replace('%Y', date.getFullYear())
+ .replace('%d', date.getDate())
+ });
+ })
+ view.bind('data-url-text', function(el, prop) {
+ var binding = this;
+
+ binding.change(function() {
+ var value = binding.value(prop);
+ el.textContent = value.replace(/^https?:\/\/(www\.)?/, '');
+ });
+ })
}
UserView.prototype.url = function(){
return 'http://myapp.com/user/' + this.user.slug;
};
- UserView.prototype.date = function(date, fmt){
- return fmt
- .replace('%Y', date.getFullYear())
- .replace('%d', date.getDate())
- };
-
- UserView.prototype.remove_protocol = function(url){
- return url.replace(/^https?:\/\/(www\.)?/, '');
- };
-
UserView.prototype.fullname = function(){
return this.user.first + ' ' + this.user.last;
};
Oops, something went wrong.

0 comments on commit 9fe37f1

Please sign in to comment.