Merge pull request #381 from kayellpeee/update_to_IIFEs
Update to IIFEs
This commit is contained in:
commit
d05b903024
4 changed files with 16 additions and 16 deletions
|
|
@ -136,7 +136,7 @@ myApp.users.index.view = function() {
|
||||||
There's no rule for how you should organize code, and given that namespacing is often achieved with simple javascript, you can use simple javascript patterns to alias a long namespace and reduce the amount of typing:
|
There's no rule for how you should organize code, and given that namespacing is often achieved with simple javascript, you can use simple javascript patterns to alias a long namespace and reduce the amount of typing:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
new function() {
|
!function() {
|
||||||
var module = myApp.users.index = {}
|
var module = myApp.users.index = {}
|
||||||
|
|
||||||
module.vm = {/*...*/}
|
module.vm = {/*...*/}
|
||||||
|
|
@ -148,7 +148,7 @@ new function() {
|
||||||
|
|
||||||
return vm.something
|
return vm.something
|
||||||
}
|
}
|
||||||
}
|
}()
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -130,7 +130,7 @@ In the case of our todo application, the view-model needs a few things: it needs
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
//define the view-model
|
//define the view-model
|
||||||
todo.vm = new function() {
|
todo.vm = (function() {
|
||||||
var vm = {}
|
var vm = {}
|
||||||
vm.init = function() {
|
vm.init = function() {
|
||||||
//a running list of todos
|
//a running list of todos
|
||||||
|
|
@ -148,7 +148,7 @@ todo.vm = new function() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return vm
|
return vm
|
||||||
}
|
}())
|
||||||
```
|
```
|
||||||
|
|
||||||
The code above defines a view-model object called `vm`. It is simply a javascript object that has a `init` function. This function initializes the `vm` object with three members: `list`, which is simply an array, `description`, which is an `m.prop` getter-setter function with an empty string as the initial value, and `add`, which is a method that adds a new Todo instance to `list` if an input description getter-setter is not an empty string.
|
The code above defines a view-model object called `vm`. It is simply a javascript object that has a `init` function. This function initializes the `vm` object with three members: `list`, which is simply an array, `description`, which is an `m.prop` getter-setter function with an empty string as the initial value, and `add`, which is a method that adds a new Todo instance to `list` if an input description getter-setter is not an empty string.
|
||||||
|
|
@ -334,10 +334,10 @@ vm.add = function() {
|
||||||
vm.list.push(new todo.Todo({description: vm.description()}));
|
vm.list.push(new todo.Todo({description: vm.description()}));
|
||||||
vm.description("");
|
vm.description("");
|
||||||
}
|
}
|
||||||
}.bind(this);
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
The difference with the modified version is that `add` no longer takes an argument, and we call `.bind(this)` at the end to lock the scoping of `this` inside of the `add` method.
|
The difference with the modified version is that `add` no longer takes an argument.
|
||||||
|
|
||||||
With this, we can make the `onclick` binding on the template *much* simpler:
|
With this, we can make the `onclick` binding on the template *much* simpler:
|
||||||
|
|
||||||
|
|
@ -447,7 +447,7 @@ todo.TodoList = Array;
|
||||||
//stores a description for new todos before they are created
|
//stores a description for new todos before they are created
|
||||||
//and takes care of the logic surrounding when adding is permitted
|
//and takes care of the logic surrounding when adding is permitted
|
||||||
//and clearing the input after adding a todo to the list
|
//and clearing the input after adding a todo to the list
|
||||||
todo.vm = new function() {
|
todo.vm = (function() {
|
||||||
var vm = {}
|
var vm = {}
|
||||||
vm.init = function() {
|
vm.init = function() {
|
||||||
//a running list of todos
|
//a running list of todos
|
||||||
|
|
@ -465,7 +465,7 @@ todo.vm = new function() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return vm
|
return vm
|
||||||
}
|
}())
|
||||||
|
|
||||||
//the controller defines what part of the model is relevant for the current page
|
//the controller defines what part of the model is relevant for the current page
|
||||||
//in our case, there's only one view-model that handles everything
|
//in our case, there's only one view-model that handles everything
|
||||||
|
|
|
||||||
|
|
@ -64,17 +64,17 @@ The example below shows how to use a SubtreeDirective object to create a static
|
||||||
var app = {}
|
var app = {}
|
||||||
|
|
||||||
//here's an example plugin that determines whether data has changes.
|
//here's an example plugin that determines whether data has changes.
|
||||||
//in this case, it simply assume data has changed the first time, and never changes after that.
|
//in this case, it simply assumes data has changed the first time, and never changes after that.
|
||||||
app.bindOnce = new function() {
|
app.bindOnce = (function() {
|
||||||
var cache = {}
|
var cache = {}
|
||||||
function(view) {
|
return function(view) {
|
||||||
if (!cache[view.toString()]) {
|
if (!cache[view.toString()]) {
|
||||||
cache[view.toString()] = true
|
cache[view.toString()] = true
|
||||||
return view()
|
return view()
|
||||||
}
|
}
|
||||||
else return {subtree: "retain"}
|
else return {subtree: "retain"}
|
||||||
}
|
}
|
||||||
}
|
}())
|
||||||
|
|
||||||
//here's the view
|
//here's the view
|
||||||
app.view = function() {
|
app.view = function() {
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ if (!Object.keys) {
|
||||||
}
|
}
|
||||||
|
|
||||||
var mock = {}
|
var mock = {}
|
||||||
mock.window = new function() {
|
mock.window = (function() {
|
||||||
var window = {}
|
var window = {}
|
||||||
window.document = {}
|
window.document = {}
|
||||||
window.document.childNodes = []
|
window.document.childNodes = []
|
||||||
|
|
@ -136,7 +136,7 @@ mock.window = new function() {
|
||||||
callback()
|
callback()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.XMLHttpRequest = new function() {
|
window.XMLHttpRequest = (function() {
|
||||||
var request = function() {
|
var request = function() {
|
||||||
this.$headers = {}
|
this.$headers = {}
|
||||||
this.setRequestHeader = function(key, value) {
|
this.setRequestHeader = function(key, value) {
|
||||||
|
|
@ -155,7 +155,7 @@ mock.window = new function() {
|
||||||
}
|
}
|
||||||
request.$instances = []
|
request.$instances = []
|
||||||
return request
|
return request
|
||||||
}
|
}())
|
||||||
window.location = {search: "", pathname: "", hash: ""},
|
window.location = {search: "", pathname: "", hash: ""},
|
||||||
window.history = {}
|
window.history = {}
|
||||||
window.history.pushState = function(data, title, url) {
|
window.history.pushState = function(data, title, url) {
|
||||||
|
|
@ -165,4 +165,4 @@ mock.window = new function() {
|
||||||
window.location.pathname = window.location.search = window.location.hash = url
|
window.location.pathname = window.location.search = window.location.hash = url
|
||||||
}
|
}
|
||||||
return window
|
return window
|
||||||
}
|
}())
|
||||||
Loading…
Add table
Add a link
Reference in a new issue