Skip to content

Commit

Permalink
Update docs from @codestart/end to 4 space indent
Browse files Browse the repository at this point in the history
  • Loading branch information
@imjoshdean @daffl
imjoshdean authored and daffl committed Oct 16, 2014
1 parent 5f856a7 commit 01e3c77
Show file tree
Hide file tree
Showing 11 changed files with 230 additions and 237 deletions.
113 changes: 56 additions & 57 deletions map/doc/map.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,29 +47,29 @@ Usually, you will want to do this when creating a `[can.compute]` or when
live-binding properties in an [can.ejs EJS] template. (If you are using
[can.mustache Mustache], you don't need to use `attr`.)

@codestart
var aName = {a: 'Alexis'},
map = new can.Map(aName);

// Observes are copies of data:
aName === map; // false
var aName = {a: 'Alexis'},
map = new can.Map(aName);

// reading from an Observe:
map.attr(); // {a: 'Alexis'}
map.a; // 'Alexis'
map.attr('a'); // 'Alexis'
// Observes are copies of data:
aName === map; // false

// setting an Observe's property:
map.attr('a', 'Alice');
map.a; // Alice
// reading from an Observe:
map.attr(); // {a: 'Alexis'}
map.a; // 'Alexis'
map.attr('a'); // 'Alexis'

// removing an Observe's property;
map.removeAttr('a');
map.attr(); // {}
// setting an Observe's property:
map.attr('a', 'Alice');
map.a; // Alice

// removing an Observe's property;
map.removeAttr('a');
map.attr(); // {}

// Don't do this!
map.a = 'Adam'; // wrong!

// Don't do this!
map.a = 'Adam'; // wrong!
@codeend

Find out more about manipulating properties of Observes under
[can.Map.prototype.attr attr] and [can.Map.prototype.removeAttr removeAttr].
Expand All @@ -84,52 +84,51 @@ properties are changed that you can bind to.
- the _change_ event fires on every change to an Observe.
- an event named after the property name fires on every change to that property.

@codestart
var o = new can.Map({});
o.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log('Something on o changed.');
});
o.bind('a', function(ev, newVal, oldVal) {
console.log('a was changed.');
});

o.attr('a', 'Alexis'); // 'Something on o changed.'
// 'a was changed.'
o.attr({
'a': 'Alice', // 'Something on o changed.' (for a's change)
'b': 'Bob' // 'Something on o changed.' (for b's change)
}); // 'a was changed.'
var o = new can.Map({});
o.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log('Something on o changed.');
});
o.bind('a', function(ev, newVal, oldVal) {
console.log('a was changed.');
});

o.attr('a', 'Alexis'); // 'Something on o changed.'
// 'a was changed.'
o.attr({
'a': 'Alice', // 'Something on o changed.' (for a's change)
'b': 'Bob' // 'Something on o changed.' (for b's change)
}); // 'a was changed.'

o.removeAttr('a'); // 'Something on o changed.'
// 'a was changed.'

o.removeAttr('a'); // 'Something on o changed.'
// 'a was changed.'
@codeend

For more detail on how to use these events, see [can.Map.prototype.bind bind] and
[can.Map.prototype.unbind unbind]. There is also a plugin called [can.Map.delegate]
that makes binding to specific types of events easier:

@codestart
var o = new can.Map({});
o.delegate('a', 'add', function(ev, newVal, oldVal) {
console.log('a was added.');
});
o.delegate('a', 'set', function(ev, newVal, oldVal) {
console.log('a was set.');
});
o.delegate('a', 'remove', function(ev, newVal, oldVal) {
console.log('a was removed.');
});
o.delegate('a', 'change', function(ev, newVal, oldVal) {
console.log('a was changed.');
});

o.attr('a', 'Alexis'); // 'a was added.'
// 'a was changed.'

o.attr('a', 'Alice'); // 'a was set.'
// 'a was changed.'
var o = new can.Map({});
o.delegate('a', 'add', function(ev, newVal, oldVal) {
console.log('a was added.');
});
o.delegate('a', 'set', function(ev, newVal, oldVal) {
console.log('a was set.');
});
o.delegate('a', 'remove', function(ev, newVal, oldVal) {
console.log('a was removed.');
});
o.delegate('a', 'change', function(ev, newVal, oldVal) {
console.log('a was changed.');
});

o.attr('a', 'Alexis'); // 'a was added.'
// 'a was changed.'

o.attr('a', 'Alice'); // 'a was set.'
// 'a was changed.'

o.removeAttr('a'); // 'a was removed.'
// 'a was changed.'

o.removeAttr('a'); // 'a was removed.'
// 'a was changed.'
@codeend
112 changes: 56 additions & 56 deletions map/doc/prototype.attr.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,90 +41,90 @@ To remove keys without setting other keys, use `[can.Map::removeAttr removeAttr]
`attr` gets or sets properties on the `can.Map` it's called on. Here's a tour through
how all of its forms work:

@codestart
var people = new can.Map({});

// set a property:
people.attr('a', 'Alex');
var people = new can.Map({});

// get a property:
people.attr('a'); // 'Alex'
// set a property:
people.attr('a', 'Alex');

// set and merge multiple properties:
people.attr({
a: 'Alice',
b: 'Bob'
});
// get a property:
people.attr('a'); // 'Alex'

// get all properties:
people.attr(); // {a: 'Alice', b: 'Bob'}
// set and merge multiple properties:
people.attr({
a: 'Alice',
b: 'Bob'
});

// set properties while removing others:
people.attr({
b: 'Bill',
e: 'Eve'
}, true);
// get all properties:
people.attr(); // {a: 'Alice', b: 'Bob'}

// set properties while removing others:
people.attr({
b: 'Bill',
e: 'Eve'
}, true);

people.attr(); // {b: 'Bill', e: 'Eve'}

people.attr(); // {b: 'Bill', e: 'Eve'}
@codeend

## Deep properties

`attr` can also set and read deep properties. All you have to do is specify
the property name as you normally would if you weren't using `attr`.

@codestart
var people = new can.Map({names: {}});

// set a property:
people.attr('names.a', 'Alice');
var people = new can.Map({names: {}});

// get a property:
people.attr('names.a'); // 'Alice'
people.names.attr('a'); // 'Alice'
// set a property:
people.attr('names.a', 'Alice');

// get a property:
people.attr('names.a'); // 'Alice'
people.names.attr('a'); // 'Alice'

// get all properties:
people.attr(); // {names: {a: 'Alice'}}

// get all properties:
people.attr(); // {names: {a: 'Alice'}}
@codeend

Objects that are added to Observes become Observes themselves behind the scenes,
so changes to deep properties fire events at each level, and you can bind at any
level. As this example shows, all the same events are fired no matter what level
you call `attr` at:

@codestart
var people = new can.Map({names: {}});

people.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log('people change: ' + attr + ', ' + how + ', ' + newVal + ', ' + oldVal);
});
var people = new can.Map({names: {}});

people.names.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log('people.names change' + attr + ', ' + how + ', ' + newVal + ', ' + oldVal);
});
people.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log('people change: ' + attr + ', ' + how + ', ' + newVal + ', ' + oldVal);
});

people.bind('names', function(ev, newVal, oldVal) {
console.log('people names: ' + newVal + ', ' + oldVal);
});
people.names.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log('people.names change' + attr + ', ' + how + ', ' + newVal + ', ' + oldVal);
});

people.names.bind('a', function(ev, newVal, oldVal) {
console.log('people.names a: ' + newVal + ', ' + oldVal);
});
people.bind('names', function(ev, newVal, oldVal) {
console.log('people names: ' + newVal + ', ' + oldVal);
});

people.bind('names.a', function(ev, newVal, oldVal) {
console.log('people names.a: ' + newVal + ', ' + oldVal);
});
people.names.bind('a', function(ev, newVal, oldVal) {
console.log('people.names a: ' + newVal + ', ' + oldVal);
});

people.attr('names.a', 'Alice'); // people change: names.a, add, Alice, undefined
// people.names change: a, add, Alice, undefined
// people.names a: Alice, undefined
// people names.a: Alice, undefined
people.bind('names.a', function(ev, newVal, oldVal) {
console.log('people names.a: ' + newVal + ', ' + oldVal);
});

people.attr('names.a', 'Alice'); // people change: names.a, add, Alice, undefined
// people.names change: a, add, Alice, undefined
// people.names a: Alice, undefined
// people names.a: Alice, undefined

people.names.attr('b', 'Bob'); // people change: names.b, add, Bob, undefined
// people.names change: b, add, Bob, undefined
// people.names b: Bob, undefined
// people names.b: Bob, undefined

people.names.attr('b', 'Bob'); // people change: names.b, add, Bob, undefined
// people.names change: b, add, Bob, undefined
// people.names b: Bob, undefined
// people names.b: Bob, undefined
@codeend

## Properties with dots in their name

Expand Down
80 changes: 40 additions & 40 deletions map/doc/prototype.bind.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@ of your application to map the changes to the object.
The first event that is fired is the _change_ event. The _change_ event is useful
if you want to react to all changes on an Map.

@codestart
var o = new can.Map({});
o.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log('Something changed.');
});
@codeend

var o = new can.Map({});
o.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log('Something changed.');
});


The parameters of the event handler for the _change_ event are:

Expand All @@ -38,20 +38,20 @@ The parameters of the event handler for the _change_ event are:

Here is a concrete tour through the _change_ event handler's arguments:

@codestart
var o = new can.Map({});
o.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log(ev + ', ' + attr + ', ' + how + ', ' + newVal + ', ' + oldVal);
});

o.attr('a', 'Alexis'); // [object Object], a, add, Alexis, undefined
o.attr('a', 'Adam'); // [object Object], a, set, Adam, Alexis
o.attr({
'a': 'Alice', // [object Object], a, set, Alice, Adam
'b': 'Bob' // [object Object], b, add, Bob, undefined
});
o.removeAttr('a'); // [object Object], a, remove, undefined, Alice
@codeend

var o = new can.Map({});
o.bind('change', function(ev, attr, how, newVal, oldVal) {
console.log(ev + ', ' + attr + ', ' + how + ', ' + newVal + ', ' + oldVal);
});

o.attr('a', 'Alexis'); // [object Object], a, add, Alexis, undefined
o.attr('a', 'Adam'); // [object Object], a, set, Adam, Alexis
o.attr({
'a': 'Alice', // [object Object], a, set, Alice, Adam
'b': 'Bob' // [object Object], b, add, Bob, undefined
});
o.removeAttr('a'); // [object Object], a, remove, undefined, Alice


(See also `[can.Map::removeAttr removeAttr]`, which removes properties).

Expand All @@ -60,12 +60,12 @@ o.removeAttr('a'); // [object Object], a, remove, undefined, Alice
The second event that is fired is an event whose type is the same as the changed
property's name. This event is useful for noticing changes to a specific property.

@codestart
var o = new can.Map({});
o.bind('a', function(ev, newVal, oldVal) {
console.log('The value of a changed.');
});
@codeend

var o = new can.Map({});
o.bind('a', function(ev, newVal, oldVal) {
console.log('The value of a changed.');
});


The parameters of the event handler for the _property name_ event are:

Expand All @@ -75,20 +75,20 @@ The parameters of the event handler for the _property name_ event are:

Here is a concrete tour through the _property name_ event handler's arguments:

@codestart
var o = new can.Map({});
o.bind('a', function(ev, newVal, oldVal) {
console.log(ev + ', ' + newVal + ', ' + oldVal);
});

o.attr('a', 'Alexis'); // [object Object], Alexis, undefined
o.attr('a', 'Adam'); // [object Object], Adam, Alexis
o.attr({
'a': 'Alice', // [object Object], Alice, Adam
'b': 'Bob'
});
o.removeAttr('a'); // [object Object], undefined, Alice
@codeend

var o = new can.Map({});
o.bind('a', function(ev, newVal, oldVal) {
console.log(ev + ', ' + newVal + ', ' + oldVal);
});

o.attr('a', 'Alexis'); // [object Object], Alexis, undefined
o.attr('a', 'Adam'); // [object Object], Adam, Alexis
o.attr({
'a': 'Alice', // [object Object], Alice, Adam
'b': 'Bob'
});
o.removeAttr('a'); // [object Object], undefined, Alice


## See also

Expand Down
Loading

0 comments on commit 01e3c77

Please sign in to comment.