extract tab templates, split up repo views
This commit is contained in:
Sven Fuchs
parent
f0103a64aa
commit
ce8daa6d73
|
|
@ -26,8 +26,8 @@ Travis.reopen
|
|||
|
||||
view
|
||||
|
||||
# TopController: Em.Controller.extend
|
||||
# userBinding: 'Travis.app.currentUser'
|
||||
TopController: Em.Controller.extend
|
||||
userBinding: 'Travis.currentUser'
|
||||
|
||||
require 'controllers/builds'
|
||||
require 'controllers/home'
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
Travis.RepositoriesController = Ember.ArrayController.extend
|
||||
defaultTab: 'recent'
|
||||
sortProperties: ['sortOrder']
|
||||
|
||||
init: ->
|
||||
@activate('recent')
|
||||
@activate(@defaultTab)
|
||||
Ember.run.later(@updateTimes.bind(this), Travis.INTERVALS.updateTimes)
|
||||
|
||||
updateTimes: ->
|
||||
|
|
@ -18,8 +19,8 @@ Travis.RepositoriesController = Ember.ArrayController.extend
|
|||
viewRecent: ->
|
||||
@set('content', Travis.Repository.find())
|
||||
|
||||
viewOwned: (params) ->
|
||||
@set('content', Travis.Repository.owned_by(params.login))
|
||||
viewOwned: ->
|
||||
@set('content', Travis.Repository.ownedBy(Travis.get('currentUser.login')))
|
||||
|
||||
viewSearch: (params) ->
|
||||
@set('content', Travis.Repository.search(params.search))
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ require 'travis/model'
|
|||
recent: ->
|
||||
@find()
|
||||
|
||||
ownedBy: (owner) ->
|
||||
@find(owner: owner, orderBy: 'name')
|
||||
ownedBy: (login) ->
|
||||
@find(owner: login, orderBy: 'name')
|
||||
|
||||
search: (query) ->
|
||||
@find(search: query, orderBy: 'name')
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
Travis.Pusher = ->
|
||||
@active_channels = []
|
||||
if Travis.Pusher.KEY
|
||||
@pusher = new Pusher(Travis.Pusher.KEY)
|
||||
@active_channels = []
|
||||
@subscribe(channel) for channel in Travis.Pusher.CHANNELS
|
||||
# @subscribe(channel) for channel in Travis.Pusher.CHANNELS
|
||||
this
|
||||
|
||||
$.extend Travis.Pusher,
|
||||
|
|
|
|||
|
|
@ -18,8 +18,14 @@ $.extend Travis.Routes.prototype,
|
|||
Em.routes.set('location', event.target.href.replace("#{@base_uri}/", ''))
|
||||
|
||||
action: (name, action, params) ->
|
||||
@render(name, action, params) if @before(name, action, params)
|
||||
|
||||
render: (name, action, params) ->
|
||||
console.log [name, action, params]
|
||||
# this needs to be a global reference because Em.routes is global
|
||||
layout = Travis.app.connectLayout(name)
|
||||
layout.activate(action, params || {})
|
||||
$('body').attr('id', name)
|
||||
|
||||
before: (name, action, params) ->
|
||||
true
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{{view.logSubscriber}}
|
||||
|
||||
{{#if log.isLoaded}}
|
||||
<pre id="log">{{{formatLog log.body}}}</pre>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,17 +2,7 @@
|
|||
{{view Ember.TextField valueBinding="controller.search"}}
|
||||
</div>
|
||||
|
||||
<ul class="tabs">
|
||||
<li id="tab_recent" {{bindAttr class="view.classRecent"}}>
|
||||
<h5><a href="/" {{action route}}>{{t layouts.application.recent}}</a></h5>
|
||||
</li>
|
||||
<li id="tab_owned" {{bindAttr class="view.classOwned"}}>
|
||||
<h5><a href="/" {{action route}}>{{t layouts.application.my_repositories}}</a></h5>
|
||||
</li>
|
||||
<li id="tab_search" {{bindAttr class="view.classSearch"}}>
|
||||
<h5><a href="/" {{action route}}>{{t layouts.application.search}}</a></h5>
|
||||
</li>
|
||||
</ul>
|
||||
{{view Travis.ReposListTabsView}}
|
||||
|
||||
<div class="tab">
|
||||
{{#collection Travis.RepositoriesListView contentBinding="controller"}}
|
||||
|
|
|
|||
12
assets/javascripts/app/templates/repos/list/tabs.hbs
Normal file
12
assets/javascripts/app/templates/repos/list/tabs.hbs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<ul class="tabs">
|
||||
<li id="tab_recent" {{bindAttr class="view.classRecent"}}>
|
||||
<h5><a name="recent" {{action activate}}>{{t layouts.application.recent}}</a></h5>
|
||||
</li>
|
||||
<li id="tab_owned" {{bindAttr class="view.classOwned"}}>
|
||||
<h5><a name="owned" {{action activate}}>{{t layouts.application.my_repositories}}</a></h5>
|
||||
</li>
|
||||
<li id="tab_search" {{bindAttr class="view.classSearch"}}>
|
||||
<h5><a name="search" {{action activate}}>{{t layouts.application.search}}</a></h5>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
{{view Travis.TabsView}}
|
||||
{{view Travis.RepoShowTabsView}}
|
||||
{{/with}}
|
||||
|
||||
{{else}}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,5 @@ require 'views/repo'
|
|||
require 'views/profile'
|
||||
require 'views/sidebar'
|
||||
require 'views/stats'
|
||||
require 'views/tabs'
|
||||
require 'views/top'
|
||||
|
||||
|
|
|
|||
20
assets/javascripts/app/views/left.coffee
Normal file
20
assets/javascripts/app/views/left.coffee
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@Travis.reopen
|
||||
ReposView: Travis.View.extend
|
||||
templateName: 'repos/list'
|
||||
tabBinding: 'controller.tab'
|
||||
|
||||
classRecent: (->
|
||||
'active' if @get('tab') == 'recent'
|
||||
).property('tab')
|
||||
|
||||
classOwned: (->
|
||||
classes = []
|
||||
classes.push('active') if @get('tab') == 'owned'
|
||||
classes.push('display') if Em.get('Travis.currentUser')
|
||||
classes.join(' ')
|
||||
).property('tab', 'Travis.currentUser')
|
||||
|
||||
classSearch: (->
|
||||
'active' if @get('tab') == 'search'
|
||||
).property('tab')
|
||||
|
||||
|
|
@ -1,66 +1,7 @@
|
|||
@Travis.reopen
|
||||
RepositoriesView: Travis.View.extend
|
||||
templateName: 'repos/list'
|
||||
tabBinding: 'controller.tab'
|
||||
require 'views/repo/repos'
|
||||
|
||||
classRecent: (->
|
||||
'active' if @get('tab') == 'recent'
|
||||
).property('tab')
|
||||
require 'views/repo/list'
|
||||
require 'views/repo/list/tabs'
|
||||
require 'views/repo/show'
|
||||
require 'views/repo/show/tabs'
|
||||
|
||||
classOwned: (->
|
||||
classes = []
|
||||
classes.push('active') if @get('tab') == 'owned'
|
||||
classes.push('display') if Em.get('Travis.currentUser')
|
||||
classes.join(' ')
|
||||
).property('tab', 'Travis.currentUser')
|
||||
|
||||
classSearch: (->
|
||||
'active' if @get('tab') == 'search'
|
||||
).property('tab')
|
||||
|
||||
RepositoriesListView: Em.CollectionView.extend
|
||||
elementId: 'repositories'
|
||||
repositoryBinding: 'content'
|
||||
tagName: 'ul'
|
||||
|
||||
emptyView: Ember.View.extend
|
||||
template: Ember.Handlebars.compile('<div class="loading"><span>Loading</span></div>')
|
||||
|
||||
itemViewClass: Travis.View.extend
|
||||
repositoryBinding: 'content'
|
||||
classNames: ['repository']
|
||||
classNameBindings: ['color', 'selected']
|
||||
selectedBinding: 'repository.selected'
|
||||
|
||||
color: (->
|
||||
Travis.Helpers.colorForResult(@get('repository.lastBuildResult'))
|
||||
).property('repository.lastBuildResult')
|
||||
|
||||
urlRepository: (->
|
||||
Travis.Urls.repository(@get('repository.slug'))
|
||||
).property('repository.slug')
|
||||
|
||||
urlLastBuild: (->
|
||||
Travis.Urls.build(@get('repository.slug'), @get('repository.lastBuildId'))
|
||||
).property('repository.slug', 'repository.lastBuildId')
|
||||
|
||||
RepositoryView: Travis.View.extend
|
||||
templateName: 'repos/show'
|
||||
|
||||
repositoryBinding: 'controller.repository'
|
||||
|
||||
class: (->
|
||||
'loading' unless @get('repository.isLoaded')
|
||||
).property('repository.isLoaded')
|
||||
|
||||
urlGithub: (->
|
||||
Travis.Urls.githubRepository(@get('repository.slug'))
|
||||
).property('repository.slug'),
|
||||
|
||||
urlGithubWatchers: (->
|
||||
Travis.Urls.githubWatchers(@get('repository.slug'))
|
||||
).property('repository.slug'),
|
||||
|
||||
urlGithubNetwork: (->
|
||||
Travis.Urls.githubNetwork(@get('repository.slug'))
|
||||
).property('repository.slug'),
|
||||
|
|
|
|||
26
assets/javascripts/app/views/repo/list.coffee
Normal file
26
assets/javascripts/app/views/repo/list.coffee
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@Travis.reopen
|
||||
RepositoriesListView: Em.CollectionView.extend
|
||||
elementId: 'repositories'
|
||||
repositoryBinding: 'content'
|
||||
tagName: 'ul'
|
||||
|
||||
emptyView: Ember.View.extend
|
||||
template: Ember.Handlebars.compile('<div class="loading"><span>Loading</span></div>')
|
||||
|
||||
itemViewClass: Travis.View.extend
|
||||
repositoryBinding: 'content'
|
||||
classNames: ['repository']
|
||||
classNameBindings: ['color', 'selected']
|
||||
selectedBinding: 'repository.selected'
|
||||
|
||||
color: (->
|
||||
Travis.Helpers.colorForResult(@get('repository.lastBuildResult'))
|
||||
).property('repository.lastBuildResult')
|
||||
|
||||
urlRepository: (->
|
||||
Travis.Urls.repository(@get('repository.slug'))
|
||||
).property('repository.slug')
|
||||
|
||||
urlLastBuild: (->
|
||||
Travis.Urls.build(@get('repository.slug'), @get('repository.lastBuildId'))
|
||||
).property('repository.slug', 'repository.lastBuildId')
|
||||
24
assets/javascripts/app/views/repo/list/tabs.coffee
Normal file
24
assets/javascripts/app/views/repo/list/tabs.coffee
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
@Travis.reopen
|
||||
ReposListTabsView: Travis.View.extend
|
||||
templateName: 'repos/list/tabs'
|
||||
tabBinding: 'controller.tab'
|
||||
|
||||
activate: (event) ->
|
||||
@get('controller').activate(event.target.name)
|
||||
|
||||
classRecent: (->
|
||||
'active' if @get('tab') == 'recent'
|
||||
).property('tab')
|
||||
|
||||
classOwned: (->
|
||||
classes = []
|
||||
classes.push('active') if @get('tab') == 'owned'
|
||||
classes.push('display') if Em.get('Travis.currentUser')
|
||||
classes.join(' ')
|
||||
).property('tab', 'Travis.currentUser')
|
||||
|
||||
classSearch: (->
|
||||
'active' if @get('tab') == 'search'
|
||||
).property('tab')
|
||||
|
||||
|
||||
3
assets/javascripts/app/views/repo/repos.coffee
Normal file
3
assets/javascripts/app/views/repo/repos.coffee
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@Travis.reopen
|
||||
RepositoriesView: Travis.View.extend
|
||||
templateName: 'repos/list'
|
||||
23
assets/javascripts/app/views/repo/show.coffee
Normal file
23
assets/javascripts/app/views/repo/show.coffee
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
require 'views/repo/show/tabs'
|
||||
|
||||
@Travis.reopen
|
||||
RepositoryView: Travis.View.extend
|
||||
templateName: 'repos/show'
|
||||
|
||||
repositoryBinding: 'controller.repository'
|
||||
|
||||
class: (->
|
||||
'loading' unless @get('repository.isLoaded')
|
||||
).property('repository.isLoaded')
|
||||
|
||||
urlGithub: (->
|
||||
Travis.Urls.githubRepository(@get('repository.slug'))
|
||||
).property('repository.slug'),
|
||||
|
||||
urlGithubWatchers: (->
|
||||
Travis.Urls.githubWatchers(@get('repository.slug'))
|
||||
).property('repository.slug'),
|
||||
|
||||
urlGithubNetwork: (->
|
||||
Travis.Urls.githubNetwork(@get('repository.slug'))
|
||||
).property('repository.slug'),
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@Travis.reopen
|
||||
TabsView: Travis.View.extend
|
||||
templateName: 'repos/tabs'
|
||||
RepoShowTabsView: Travis.View.extend
|
||||
templateName: 'repos/show/tabs'
|
||||
|
||||
repositoryBinding: 'controller.repository'
|
||||
buildBinding: 'controller.build'
|
||||
|
|
@ -79,8 +79,3 @@
|
|||
"{<img src=\"#{@get('urlStatusImage')}\" alt=\"Build Status\" />}[#{@get('urlRepository')}]"
|
||||
).property('urlStatusImage')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
160
assets/javascripts/vendor/ember.js
vendored
160
assets/javascripts/vendor/ember.js
vendored
|
|
@ -2102,6 +2102,8 @@ function flushPendingChains() {
|
|||
forEach.call(queue, function(q) { q[0].add(q[1]); });
|
||||
|
||||
Ember.warn('Watching an undefined global, Ember expects watched globals to be setup by the time the run loop is flushed, check for typos', pendingQueue.length === 0);
|
||||
if(pendingQueue.length > 0)
|
||||
console.log(pendingQueue)
|
||||
}
|
||||
|
||||
/** @private */
|
||||
|
|
@ -3485,7 +3487,7 @@ Ember.RunLoop = RunLoop;
|
|||
call.
|
||||
|
||||
Ember.run(function(){
|
||||
// code to be execute within a RunLoop
|
||||
// code to be execute within a RunLoop
|
||||
});
|
||||
|
||||
@name run
|
||||
|
|
@ -3523,7 +3525,7 @@ var run = Ember.run;
|
|||
an lower-level way to use a RunLoop instead of using Ember.run().
|
||||
|
||||
Ember.run.begin();
|
||||
// code to be execute within a RunLoop
|
||||
// code to be execute within a RunLoop
|
||||
Ember.run.end();
|
||||
|
||||
|
||||
|
|
@ -3539,7 +3541,7 @@ Ember.run.begin = function() {
|
|||
instead of using Ember.run().
|
||||
|
||||
Ember.run.begin();
|
||||
// code to be execute within a RunLoop
|
||||
// code to be execute within a RunLoop
|
||||
Ember.run.end();
|
||||
|
||||
@returns {void}
|
||||
|
|
@ -5272,7 +5274,7 @@ Ember.inspect = function(obj) {
|
|||
/**
|
||||
Compares two objects, returning true if they are logically equal. This is
|
||||
a deeper comparison than a simple triple equal. For sets it will compare the
|
||||
internal objects. For any other object that implements `isEqual()` it will
|
||||
internal objects. For any other object that implements `isEqual()` it will
|
||||
respect that method.
|
||||
|
||||
Ember.isEqual('hello', 'hello'); => true
|
||||
|
|
@ -5455,7 +5457,7 @@ Ember.String = {
|
|||
> beta
|
||||
> gamma
|
||||
|
||||
@param {String} str
|
||||
@param {String} str
|
||||
The string to split
|
||||
|
||||
@returns {String} split string
|
||||
|
|
@ -5464,7 +5466,7 @@ Ember.String = {
|
|||
|
||||
/**
|
||||
Converts a camelized string into all lower case separated by underscores.
|
||||
|
||||
|
||||
'innerHTML'.decamelize() => 'inner_html'
|
||||
'action_name'.decamelize() => 'action_name'
|
||||
'css-class-name'.decamelize() => 'css-class-name'
|
||||
|
|
@ -5481,7 +5483,7 @@ Ember.String = {
|
|||
|
||||
/**
|
||||
Replaces underscores or spaces with dashes.
|
||||
|
||||
|
||||
'innerHTML'.dasherize() => 'inner-html'
|
||||
'action_name'.dasherize() => 'action-name'
|
||||
'css-class-name'.dasherize() => 'css-class-name'
|
||||
|
|
@ -5648,7 +5650,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
|
||||
/**
|
||||
The `property` extension of Javascript's Function prototype is available
|
||||
when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
|
||||
Computed properties allow you to treat a function like a property:
|
||||
|
||||
|
|
@ -5703,7 +5705,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
|
||||
/**
|
||||
The `observes` extension of Javascript's Function prototype is available
|
||||
when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
|
||||
You can observe property changes simply by adding the `observes`
|
||||
call to the end of your method declarations in classes that you write.
|
||||
|
|
@ -5714,7 +5716,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
// Executes whenever the "value" property changes
|
||||
}.observes('value')
|
||||
});
|
||||
|
||||
|
||||
@see Ember.Observable
|
||||
*/
|
||||
Function.prototype.observes = function() {
|
||||
|
|
@ -5724,7 +5726,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
|
||||
/**
|
||||
The `observesBefore` extension of Javascript's Function prototype is
|
||||
available when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
available when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
|
||||
You can get notified when a property changes is about to happen by
|
||||
by adding the `observesBefore` call to the end of your method
|
||||
|
|
@ -5735,7 +5737,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
// Executes whenever the "value" property is about to change
|
||||
}.observesBefore('value')
|
||||
});
|
||||
|
||||
|
||||
@see Ember.Observable
|
||||
*/
|
||||
Function.prototype.observesBefore = function() {
|
||||
|
|
@ -7329,7 +7331,7 @@ Ember.MutableArray = Ember.Mixin.create(Ember.Array, Ember.MutableEnumerable,
|
|||
colors.clear(); => []
|
||||
colors.length(); => 0
|
||||
|
||||
@returns {Ember.Array} An empty Array.
|
||||
@returns {Ember.Array} An empty Array.
|
||||
*/
|
||||
clear: function () {
|
||||
var len = get(this, 'length');
|
||||
|
|
@ -7537,15 +7539,15 @@ var get = Ember.get, set = Ember.set, defineProperty = Ember.defineProperty;
|
|||
@class
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
This mixin provides properties and property observing functionality, core
|
||||
features of the Ember object model.
|
||||
|
||||
|
||||
Properties and observers allow one object to observe changes to a
|
||||
property on another object. This is one of the fundamental ways that
|
||||
models, controllers and views communicate with each other in an Ember
|
||||
application.
|
||||
|
||||
|
||||
Any object that has this mixin applied can be used in observer
|
||||
operations. That includes Ember.Object and most objects you will
|
||||
interact with as you write your Ember application.
|
||||
|
|
@ -7553,16 +7555,16 @@ var get = Ember.get, set = Ember.set, defineProperty = Ember.defineProperty;
|
|||
Note that you will not generally apply this mixin to classes yourself,
|
||||
but you will use the features provided by this module frequently, so it
|
||||
is important to understand how to use it.
|
||||
|
||||
|
||||
## Using get() and set()
|
||||
|
||||
|
||||
Because of Ember's support for bindings and observers, you will always
|
||||
access properties using the get method, and set properties using the
|
||||
set method. This allows the observing objects to be notified and
|
||||
computed properties to be handled properly.
|
||||
|
||||
|
||||
More documentation about `get` and `set` are below.
|
||||
|
||||
|
||||
## Observing Property Changes
|
||||
|
||||
You typically observe property changes simply by adding the `observes`
|
||||
|
|
@ -7574,7 +7576,7 @@ var get = Ember.get, set = Ember.set, defineProperty = Ember.defineProperty;
|
|||
// Executes whenever the "value" property changes
|
||||
}.observes('value')
|
||||
});
|
||||
|
||||
|
||||
Although this is the most common way to add an observer, this capability
|
||||
is actually built into the Ember.Object class on top of two methods
|
||||
defined in this mixin: `addObserver` and `removeObserver`. You can use
|
||||
|
|
@ -7587,12 +7589,12 @@ var get = Ember.get, set = Ember.set, defineProperty = Ember.defineProperty;
|
|||
|
||||
This will call the `targetAction` method on the `targetObject` to be called
|
||||
whenever the value of the `propertyKey` changes.
|
||||
|
||||
Note that if `propertyKey` is a computed property, the observer will be
|
||||
called when any of the property dependencies are changed, even if the
|
||||
|
||||
Note that if `propertyKey` is a computed property, the observer will be
|
||||
called when any of the property dependencies are changed, even if the
|
||||
resulting value of the computed property is unchanged. This is necessary
|
||||
because computed properties are not computed until `get` is called.
|
||||
|
||||
|
||||
@extends Ember.Mixin
|
||||
*/
|
||||
Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
||||
|
|
@ -7606,7 +7608,7 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
This method is usually similar to using object[keyName] or object.keyName,
|
||||
however it supports both computed properties and the unknownProperty
|
||||
handler.
|
||||
|
||||
|
||||
Because `get` unifies the syntax for accessing all these kinds
|
||||
of properties, it can make many refactorings easier, such as replacing a
|
||||
simple property with a computed property, or vice versa.
|
||||
|
|
@ -7802,11 +7804,11 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
Ember.propertyDidChange(this, keyName);
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
Convenience method to call `propertyWillChange` and `propertyDidChange` in
|
||||
succession.
|
||||
|
||||
|
||||
@param {String} keyName The property key to be notified about.
|
||||
@returns {Ember.Observable}
|
||||
*/
|
||||
|
|
@ -7898,7 +7900,7 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
This method will be called when a client attempts to get the value of a
|
||||
property that has not been defined in one of the typical ways. Override
|
||||
this method to create "virtual" properties.
|
||||
|
||||
|
||||
@param {String} key The name of the unknown property that was requested.
|
||||
@returns {Object} The property value or undefined. Default is undefined.
|
||||
*/
|
||||
|
|
@ -7910,7 +7912,7 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
This method will be called when a client attempts to set the value of a
|
||||
property that has not been defined in one of the typical ways. Override
|
||||
this method to create "virtual" properties.
|
||||
|
||||
|
||||
@param {String} key The name of the unknown property to be set.
|
||||
@param {Object} value The value the unknown property is to be set to.
|
||||
*/
|
||||
|
|
@ -7943,9 +7945,9 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
/**
|
||||
Retrieves the value of a property, or a default value in the case that the property
|
||||
returns undefined.
|
||||
|
||||
|
||||
person.getWithDefault('lastName', 'Doe');
|
||||
|
||||
|
||||
@param {String} keyName The name of the property to retrieve
|
||||
@param {Object} defaultValue The value to return if the property value is undefined
|
||||
@returns {Object} The property value or the defaultValue.
|
||||
|
|
@ -7956,10 +7958,10 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
|
||||
/**
|
||||
Set the value of a property to the current value plus some amount.
|
||||
|
||||
|
||||
person.incrementProperty('age');
|
||||
team.incrementProperty('score', 2);
|
||||
|
||||
|
||||
@param {String} keyName The name of the property to increment
|
||||
@param {Object} increment The amount to increment by. Defaults to 1
|
||||
@returns {Object} The new property value
|
||||
|
|
@ -7969,13 +7971,13 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
set(this, keyName, (get(this, keyName) || 0)+increment);
|
||||
return get(this, keyName);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
Set the value of a property to the current value minus some amount.
|
||||
|
||||
|
||||
player.decrementProperty('lives');
|
||||
orc.decrementProperty('health', 5);
|
||||
|
||||
|
||||
@param {String} keyName The name of the property to decrement
|
||||
@param {Object} increment The amount to decrement by. Defaults to 1
|
||||
@returns {Object} The new property value
|
||||
|
|
@ -7989,9 +7991,9 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
/**
|
||||
Set the value of a boolean property to the opposite of it's
|
||||
current value.
|
||||
|
||||
|
||||
starship.toggleProperty('warpDriveEnaged');
|
||||
|
||||
|
||||
@param {String} keyName The name of the property to toggle
|
||||
@returns {Object} The new property value
|
||||
*/
|
||||
|
|
@ -11479,7 +11481,7 @@ var invokeForState = {
|
|||
`Ember.View` is the class in Ember responsible for encapsulating templates of HTML
|
||||
content, combining templates with data to render as sections of a page's DOM, and
|
||||
registering and responding to user-initiated events.
|
||||
|
||||
|
||||
## HTML Tag
|
||||
The default HTML tag name used for a view's DOM representation is `div`. This can be
|
||||
customized by setting the `tagName` property. The following view class:
|
||||
|
|
@ -11505,7 +11507,7 @@ var invokeForState = {
|
|||
<div id="ember1" class="ember-view my-class my-other-class"></div>
|
||||
|
||||
`class` attribute values can also be set by providing a `classNameBindings` property
|
||||
set to an array of properties names for the view. The return value of these properties
|
||||
set to an array of properties names for the view. The return value of these properties
|
||||
will be added as part of the value for the view's `class` attribute. These properties
|
||||
can be computed properties:
|
||||
|
||||
|
|
@ -11534,7 +11536,7 @@ var invokeForState = {
|
|||
|
||||
<div id="ember1" class="ember-view hovered"></div>
|
||||
|
||||
When using boolean class name bindings you can supply a string value other than the
|
||||
When using boolean class name bindings you can supply a string value other than the
|
||||
property name for use as the `class` HTML attribute by appending the preferred value after
|
||||
a ":" character when defining the binding:
|
||||
|
||||
|
|
@ -11612,11 +11614,11 @@ var invokeForState = {
|
|||
<div id="ember1" class="ember-view disabled"></div>
|
||||
|
||||
|
||||
Updates to the the value of a class name binding will result in automatic update
|
||||
Updates to the the value of a class name binding will result in automatic update
|
||||
of the HTML `class` attribute in the view's rendered HTML representation.
|
||||
If the value becomes `false` or `undefined` the class name will be removed.
|
||||
|
||||
Both `classNames` and `classNameBindings` are concatenated properties.
|
||||
Both `classNames` and `classNameBindings` are concatenated properties.
|
||||
See `Ember.Object` documentation for more information about concatenated properties.
|
||||
|
||||
## HTML Attributes
|
||||
|
|
@ -11662,7 +11664,7 @@ var invokeForState = {
|
|||
}.property()
|
||||
})
|
||||
|
||||
Updates to the the property of an attribute binding will result in automatic update
|
||||
Updates to the the property of an attribute binding will result in automatic update
|
||||
of the HTML attribute in the view's rendered HTML representation.
|
||||
|
||||
`attributeBindings` is a concatenated property. See `Ember.Object` documentation
|
||||
|
|
@ -11753,7 +11755,7 @@ var invokeForState = {
|
|||
primary templates, layouts can be any function that accepts an optional context
|
||||
parameter and returns a string of HTML that will be inserted inside view's tag. Views whose HTML
|
||||
element is self closing (e.g. `<input />`) cannot have a layout and this property will be ignored.
|
||||
|
||||
|
||||
Most typically in Ember a layout will be a compiled Ember.Handlebars template.
|
||||
|
||||
A view's layout can be set directly with the `layout` property or reference an
|
||||
|
|
@ -11778,7 +11780,7 @@ var invokeForState = {
|
|||
See `Handlebars.helpers.yield` for more information.
|
||||
|
||||
## Responding to Browser Events
|
||||
Views can respond to user-initiated events in one of three ways: method implementation,
|
||||
Views can respond to user-initiated events in one of three ways: method implementation,
|
||||
through an event manager, and through `{{action}}` helper use in their template or layout.
|
||||
|
||||
### Method Implementation
|
||||
|
|
@ -11795,8 +11797,8 @@ var invokeForState = {
|
|||
### Event Managers
|
||||
Views can define an object as their `eventManager` property. This object can then
|
||||
implement methods that match the desired event names. Matching events that occur
|
||||
on the view's rendered HTML or the rendered HTML of any of its DOM descendants
|
||||
will trigger this method. A `jQuery.Event` object will be passed as the first
|
||||
on the view's rendered HTML or the rendered HTML of any of its DOM descendants
|
||||
will trigger this method. A `jQuery.Event` object will be passed as the first
|
||||
argument to the method and an `Ember.View` object as the second. The `Ember.View`
|
||||
will be the view whose rendered HTML was interacted with. This may be the view with
|
||||
the `eventManager` property or one of its descendent views.
|
||||
|
|
@ -11830,7 +11832,7 @@ var invokeForState = {
|
|||
|
||||
Similarly a view's event manager will take precedence for events of any views
|
||||
rendered as a descendent. A method name that matches an event name will not be called
|
||||
if the view instance was rendered inside the HTML representation of a view that has
|
||||
if the view instance was rendered inside the HTML representation of a view that has
|
||||
an `eventManager` property defined that handles events of the name. Events not handled
|
||||
by the event manager will still trigger method calls on the descendent.
|
||||
|
||||
|
|
@ -11852,7 +11854,7 @@ var invokeForState = {
|
|||
// eventManager doesn't handle click events
|
||||
},
|
||||
mouseEnter: function(event){
|
||||
// will never be called if rendered inside
|
||||
// will never be called if rendered inside
|
||||
// an OuterView.
|
||||
}
|
||||
})
|
||||
|
|
@ -11873,7 +11875,7 @@ var invokeForState = {
|
|||
Form events: 'submit', 'change', 'focusIn', 'focusOut', 'input'
|
||||
|
||||
HTML5 drag and drop events: 'dragStart', 'drag', 'dragEnter', 'dragLeave', 'drop', 'dragEnd'
|
||||
|
||||
|
||||
## Handlebars `{{view}}` Helper
|
||||
Other `Ember.View` instances can be included as part of a view's template by using the `{{view}}`
|
||||
Handlebars helper. See `Handlebars.helpers.view` for additional information.
|
||||
|
|
@ -13420,7 +13422,7 @@ var DOMManager = {
|
|||
element = prevView.$();
|
||||
element.after(newView.$());
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -16419,7 +16421,7 @@ var get = Ember.get, set = Ember.set;
|
|||
Respectively, loading the page at the URL '#/alphabeta' would detect the route property of
|
||||
'root.bRoute' ('/alphabeta') and transition the router first to the state named 'root' and
|
||||
then to the substate 'bRoute'.
|
||||
|
||||
|
||||
## Adding Nested Routes to a Router
|
||||
Routes can contain nested subroutes each with their own `route` property describing the nested
|
||||
portion of the URL they would like to detect and handle. Router, like all instances of StateManager,
|
||||
|
|
@ -16427,27 +16429,27 @@ var get = Ember.get, set = Ember.set;
|
|||
intermediary state when detecting URLs, a Route with nested routes must define both a base `route`
|
||||
property for itself and a child Route with a `route` property of `'/'` which will be transitioned
|
||||
to when the base route is detected in the URL:
|
||||
|
||||
|
||||
Given the following application code:
|
||||
|
||||
App = Ember.Application.create({
|
||||
Router: Ember.Router.extend({
|
||||
root: Ember.Route.extend({
|
||||
aRoute: Ember.Route.extend({
|
||||
route: '/theBaseRouteForThisSet',
|
||||
|
||||
route: '/theBaseRouteForThisSet',
|
||||
|
||||
indexSubRoute: Ember.Route.extend({
|
||||
route: '/',
|
||||
}),
|
||||
|
||||
|
||||
subRouteOne: Ember.Route.extend({
|
||||
route: '/subroute1
|
||||
}),
|
||||
|
||||
|
||||
subRouteTwo: Ember.Route.extend({
|
||||
route: '/subRoute2'
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -16456,10 +16458,10 @@ var get = Ember.get, set = Ember.set;
|
|||
|
||||
When the application is loaded at '/theBaseRouteForThisSet' the Router will transition to the route
|
||||
at path 'root.aRoute' and then transition to state 'indexSubRoute'.
|
||||
|
||||
|
||||
When the application is loaded at '/theBaseRouteForThisSet/subRoute1' the Router will transition to
|
||||
the route at path 'root.aRoute' and then transition to state 'subRouteOne'.
|
||||
|
||||
|
||||
## Route Transition Events
|
||||
Transitioning between Ember.Route instances (including the transition into the detected
|
||||
route when loading the application) triggers the same transition events as state transitions for
|
||||
|
|
@ -18849,7 +18851,7 @@ EmberHandlebars.ViewHelper = Ember.Object.create({
|
|||
Will result in HTML structure:
|
||||
|
||||
<body>
|
||||
<!-- Note: the handlebars template script
|
||||
<!-- Note: the handlebars template script
|
||||
also results in a rendered Ember.View
|
||||
which is the outer <div> here -->
|
||||
|
||||
|
|
@ -18871,7 +18873,7 @@ EmberHandlebars.ViewHelper = Ember.Object.create({
|
|||
})
|
||||
|
||||
aView.appendTo('body')
|
||||
|
||||
|
||||
Will result in HTML structure:
|
||||
|
||||
<div id="ember1" class="ember-view">
|
||||
|
|
@ -18945,7 +18947,7 @@ EmberHandlebars.ViewHelper = Ember.Object.create({
|
|||
Will result in the following HTML:
|
||||
|
||||
<div id="ember1" class="ember-view">
|
||||
<div id="ember2" class="ember-view a-custom-view-class-as-property">
|
||||
<div id="ember2" class="ember-view a-custom-view-class-as-property">
|
||||
hi
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19105,7 +19107,7 @@ var get = Ember.get, getPath = Ember.Handlebars.getPath, fmt = Ember.String.fmt;
|
|||
<p class="ember-view greeting">Howdy Mary</p>
|
||||
<p class="ember-view greeting">Howdy Sara</p>
|
||||
</div>
|
||||
|
||||
|
||||
@name Handlebars.helpers.collection
|
||||
@param {String} path
|
||||
@param {Hash} options
|
||||
|
|
@ -19426,7 +19428,7 @@ ActionHelper.registerAction = function(actionName, options) {
|
|||
The `{{action}}` helper registers an HTML element within a template for
|
||||
DOM event handling and forwards that interaction to the Application's router,
|
||||
the template's `Ember.View` instance, or supplied `target` option (see 'Specifiying a Target').
|
||||
|
||||
|
||||
User interaction with that element will invoke the supplied action name on
|
||||
the appropriate target.
|
||||
|
||||
|
|
@ -19471,7 +19473,7 @@ ActionHelper.registerAction = function(actionName, options) {
|
|||
If you need the default handler to trigger you should either register your
|
||||
own event handler, or use event methods on your view class. See Ember.View
|
||||
'Responding to Browser Events' for more information.
|
||||
|
||||
|
||||
### Specifying DOM event type
|
||||
|
||||
By default the `{{action}}` helper registers for DOM `click` events. You can
|
||||
|
|
@ -19491,23 +19493,23 @@ ActionHelper.registerAction = function(actionName, options) {
|
|||
`Ember.EventDispatcher` instance will be created when a new
|
||||
`Ember.Application` is created. Having an instance of `Ember.Application`
|
||||
will satisfy this requirement.
|
||||
|
||||
|
||||
|
||||
|
||||
### Specifying a Target
|
||||
There are several possible target objects for `{{action}}` helpers:
|
||||
|
||||
|
||||
In a typical `Ember.Router`-backed Application where views are managed
|
||||
through use of the `{{outlet}}` helper, actions will be forwarded to the
|
||||
current state of the Applications's Router. See Ember.Router 'Responding
|
||||
to User-initiated Events' for more information.
|
||||
|
||||
|
||||
If you manaully set the `target` property on the controller of a template's
|
||||
`Ember.View` instance, the specifed `controller.target` will become the target
|
||||
for any actions. Likely custom values for a controller's `target` are the
|
||||
controller itself or a StateManager other than the Application's Router.
|
||||
|
||||
|
||||
If the templates's view lacks a controller property the view itself is the target.
|
||||
|
||||
|
||||
Finally, a `target` option can be provided to the helper to change which object
|
||||
will receive the method call. This option must be a string representing a
|
||||
path to an object:
|
||||
|
|
@ -19562,7 +19564,7 @@ ActionHelper.registerAction = function(actionName, options) {
|
|||
|
||||
Will throw `Uncaught TypeError: Cannot call method 'call' of undefined` when
|
||||
"click me" is clicked.
|
||||
|
||||
|
||||
### Specifying a context
|
||||
|
||||
By default the `{{action}}` helper passes the current Handlebars context
|
||||
|
|
@ -19770,7 +19772,7 @@ var set = Ember.set, get = Ember.get;
|
|||
/**
|
||||
@class
|
||||
|
||||
Creates an HTML input of type 'checkbox' with HTML related properties
|
||||
Creates an HTML input of type 'checkbox' with HTML related properties
|
||||
applied directly to the input.
|
||||
|
||||
{{view Ember.Checkbox classNames="applicaton-specific-checkbox"}}
|
||||
|
|
@ -19789,7 +19791,7 @@ var set = Ember.set, get = Ember.get;
|
|||
through the Ember object or by interacting with its rendered element representation
|
||||
via the mouse, keyboard, or touch. Updating the value of the checkbox via jQuery will
|
||||
result in the checked value of the object and its element losing synchronization.
|
||||
|
||||
|
||||
## Layout and LayoutName properties
|
||||
Because HTML `input` elements are self closing `layout` and `layoutName` properties will
|
||||
not be applied. See `Ember.View`'s layout section for more information.
|
||||
|
|
@ -19901,7 +19903,7 @@ var get = Ember.get, set = Ember.set;
|
|||
## Layout and LayoutName properties
|
||||
Because HTML `input` elements are self closing `layout` and `layoutName` properties will
|
||||
not be applied. See `Ember.View`'s layout section for more information.
|
||||
|
||||
|
||||
@extends Ember.TextSupport
|
||||
*/
|
||||
Ember.TextField = Ember.View.extend(Ember.TextSupport,
|
||||
|
|
@ -20078,7 +20080,7 @@ var get = Ember.get, set = Ember.set;
|
|||
|
||||
## Layout and LayoutName properties
|
||||
|
||||
Because HTML `textarea` elements do not contain inner HTML the `layout` and `layoutName`
|
||||
Because HTML `textarea` elements do not contain inner HTML the `layout` and `layoutName`
|
||||
properties will not be applied. See `Ember.View`'s layout section for more information.
|
||||
|
||||
@extends Ember.TextSupport
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
Travis.Pusher.KEY = '23ed642e81512118260e'
|
||||
Travis.run()
|
||||
|
||||
// Travis.app.store.load(Travis.User, { id: 1, login: 'svenfuchs', name: 'Sven Fuchs', email: 'me@svenfuchs.com', token: '1234567890', gravatar: '402602a60e500e85f2f5dc1ff3648ecb' });
|
||||
// Travis.set('currentUser', Travis.User.find(1))
|
||||
Travis.app.store.load(Travis.User, { id: 1, login: 'svenfuchs', name: 'Sven Fuchs', email: 'me@svenfuchs.com', token: '1234567890', gravatar: '402602a60e500e85f2f5dc1ff3648ecb' });
|
||||
Travis.set('currentUser', Travis.User.find(1))
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4056,6 +4056,8 @@ function flushPendingChains() {
|
|||
forEach.call(queue, function(q) { q[0].add(q[1]); });
|
||||
|
||||
Ember.warn('Watching an undefined global, Ember expects watched globals to be setup by the time the run loop is flushed, check for typos', pendingQueue.length === 0);
|
||||
if(pendingQueue.length > 0)
|
||||
console.log(pendingQueue)
|
||||
}
|
||||
|
||||
/** @private */
|
||||
|
|
@ -5439,7 +5441,7 @@ Ember.RunLoop = RunLoop;
|
|||
call.
|
||||
|
||||
Ember.run(function(){
|
||||
// code to be execute within a RunLoop
|
||||
// code to be execute within a RunLoop
|
||||
});
|
||||
|
||||
@name run
|
||||
|
|
@ -5477,7 +5479,7 @@ var run = Ember.run;
|
|||
an lower-level way to use a RunLoop instead of using Ember.run().
|
||||
|
||||
Ember.run.begin();
|
||||
// code to be execute within a RunLoop
|
||||
// code to be execute within a RunLoop
|
||||
Ember.run.end();
|
||||
|
||||
|
||||
|
|
@ -5493,7 +5495,7 @@ Ember.run.begin = function() {
|
|||
instead of using Ember.run().
|
||||
|
||||
Ember.run.begin();
|
||||
// code to be execute within a RunLoop
|
||||
// code to be execute within a RunLoop
|
||||
Ember.run.end();
|
||||
|
||||
@returns {void}
|
||||
|
|
@ -7226,7 +7228,7 @@ Ember.inspect = function(obj) {
|
|||
/**
|
||||
Compares two objects, returning true if they are logically equal. This is
|
||||
a deeper comparison than a simple triple equal. For sets it will compare the
|
||||
internal objects. For any other object that implements `isEqual()` it will
|
||||
internal objects. For any other object that implements `isEqual()` it will
|
||||
respect that method.
|
||||
|
||||
Ember.isEqual('hello', 'hello'); => true
|
||||
|
|
@ -7409,7 +7411,7 @@ Ember.String = {
|
|||
> beta
|
||||
> gamma
|
||||
|
||||
@param {String} str
|
||||
@param {String} str
|
||||
The string to split
|
||||
|
||||
@returns {String} split string
|
||||
|
|
@ -7418,7 +7420,7 @@ Ember.String = {
|
|||
|
||||
/**
|
||||
Converts a camelized string into all lower case separated by underscores.
|
||||
|
||||
|
||||
'innerHTML'.decamelize() => 'inner_html'
|
||||
'action_name'.decamelize() => 'action_name'
|
||||
'css-class-name'.decamelize() => 'css-class-name'
|
||||
|
|
@ -7435,7 +7437,7 @@ Ember.String = {
|
|||
|
||||
/**
|
||||
Replaces underscores or spaces with dashes.
|
||||
|
||||
|
||||
'innerHTML'.dasherize() => 'inner-html'
|
||||
'action_name'.dasherize() => 'action-name'
|
||||
'css-class-name'.dasherize() => 'css-class-name'
|
||||
|
|
@ -7602,7 +7604,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
|
||||
/**
|
||||
The `property` extension of Javascript's Function prototype is available
|
||||
when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
|
||||
Computed properties allow you to treat a function like a property:
|
||||
|
||||
|
|
@ -7657,7 +7659,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
|
||||
/**
|
||||
The `observes` extension of Javascript's Function prototype is available
|
||||
when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
|
||||
You can observe property changes simply by adding the `observes`
|
||||
call to the end of your method declarations in classes that you write.
|
||||
|
|
@ -7668,7 +7670,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
// Executes whenever the "value" property changes
|
||||
}.observes('value')
|
||||
});
|
||||
|
||||
|
||||
@see Ember.Observable
|
||||
*/
|
||||
Function.prototype.observes = function() {
|
||||
|
|
@ -7678,7 +7680,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
|
||||
/**
|
||||
The `observesBefore` extension of Javascript's Function prototype is
|
||||
available when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
available when Ember.EXTEND_PROTOTYPES is true, which is the default.
|
||||
|
||||
You can get notified when a property changes is about to happen by
|
||||
by adding the `observesBefore` call to the end of your method
|
||||
|
|
@ -7689,7 +7691,7 @@ if (Ember.EXTEND_PROTOTYPES) {
|
|||
// Executes whenever the "value" property is about to change
|
||||
}.observesBefore('value')
|
||||
});
|
||||
|
||||
|
||||
@see Ember.Observable
|
||||
*/
|
||||
Function.prototype.observesBefore = function() {
|
||||
|
|
@ -9283,7 +9285,7 @@ Ember.MutableArray = Ember.Mixin.create(Ember.Array, Ember.MutableEnumerable,
|
|||
colors.clear(); => []
|
||||
colors.length(); => 0
|
||||
|
||||
@returns {Ember.Array} An empty Array.
|
||||
@returns {Ember.Array} An empty Array.
|
||||
*/
|
||||
clear: function () {
|
||||
var len = get(this, 'length');
|
||||
|
|
@ -9491,15 +9493,15 @@ var get = Ember.get, set = Ember.set, defineProperty = Ember.defineProperty;
|
|||
@class
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
This mixin provides properties and property observing functionality, core
|
||||
features of the Ember object model.
|
||||
|
||||
|
||||
Properties and observers allow one object to observe changes to a
|
||||
property on another object. This is one of the fundamental ways that
|
||||
models, controllers and views communicate with each other in an Ember
|
||||
application.
|
||||
|
||||
|
||||
Any object that has this mixin applied can be used in observer
|
||||
operations. That includes Ember.Object and most objects you will
|
||||
interact with as you write your Ember application.
|
||||
|
|
@ -9507,16 +9509,16 @@ var get = Ember.get, set = Ember.set, defineProperty = Ember.defineProperty;
|
|||
Note that you will not generally apply this mixin to classes yourself,
|
||||
but you will use the features provided by this module frequently, so it
|
||||
is important to understand how to use it.
|
||||
|
||||
|
||||
## Using get() and set()
|
||||
|
||||
|
||||
Because of Ember's support for bindings and observers, you will always
|
||||
access properties using the get method, and set properties using the
|
||||
set method. This allows the observing objects to be notified and
|
||||
computed properties to be handled properly.
|
||||
|
||||
|
||||
More documentation about `get` and `set` are below.
|
||||
|
||||
|
||||
## Observing Property Changes
|
||||
|
||||
You typically observe property changes simply by adding the `observes`
|
||||
|
|
@ -9528,7 +9530,7 @@ var get = Ember.get, set = Ember.set, defineProperty = Ember.defineProperty;
|
|||
// Executes whenever the "value" property changes
|
||||
}.observes('value')
|
||||
});
|
||||
|
||||
|
||||
Although this is the most common way to add an observer, this capability
|
||||
is actually built into the Ember.Object class on top of two methods
|
||||
defined in this mixin: `addObserver` and `removeObserver`. You can use
|
||||
|
|
@ -9541,12 +9543,12 @@ var get = Ember.get, set = Ember.set, defineProperty = Ember.defineProperty;
|
|||
|
||||
This will call the `targetAction` method on the `targetObject` to be called
|
||||
whenever the value of the `propertyKey` changes.
|
||||
|
||||
Note that if `propertyKey` is a computed property, the observer will be
|
||||
called when any of the property dependencies are changed, even if the
|
||||
|
||||
Note that if `propertyKey` is a computed property, the observer will be
|
||||
called when any of the property dependencies are changed, even if the
|
||||
resulting value of the computed property is unchanged. This is necessary
|
||||
because computed properties are not computed until `get` is called.
|
||||
|
||||
|
||||
@extends Ember.Mixin
|
||||
*/
|
||||
Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
||||
|
|
@ -9560,7 +9562,7 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
This method is usually similar to using object[keyName] or object.keyName,
|
||||
however it supports both computed properties and the unknownProperty
|
||||
handler.
|
||||
|
||||
|
||||
Because `get` unifies the syntax for accessing all these kinds
|
||||
of properties, it can make many refactorings easier, such as replacing a
|
||||
simple property with a computed property, or vice versa.
|
||||
|
|
@ -9756,11 +9758,11 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
Ember.propertyDidChange(this, keyName);
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
Convenience method to call `propertyWillChange` and `propertyDidChange` in
|
||||
succession.
|
||||
|
||||
|
||||
@param {String} keyName The property key to be notified about.
|
||||
@returns {Ember.Observable}
|
||||
*/
|
||||
|
|
@ -9852,7 +9854,7 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
This method will be called when a client attempts to get the value of a
|
||||
property that has not been defined in one of the typical ways. Override
|
||||
this method to create "virtual" properties.
|
||||
|
||||
|
||||
@param {String} key The name of the unknown property that was requested.
|
||||
@returns {Object} The property value or undefined. Default is undefined.
|
||||
*/
|
||||
|
|
@ -9864,7 +9866,7 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
This method will be called when a client attempts to set the value of a
|
||||
property that has not been defined in one of the typical ways. Override
|
||||
this method to create "virtual" properties.
|
||||
|
||||
|
||||
@param {String} key The name of the unknown property to be set.
|
||||
@param {Object} value The value the unknown property is to be set to.
|
||||
*/
|
||||
|
|
@ -9897,9 +9899,9 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
/**
|
||||
Retrieves the value of a property, or a default value in the case that the property
|
||||
returns undefined.
|
||||
|
||||
|
||||
person.getWithDefault('lastName', 'Doe');
|
||||
|
||||
|
||||
@param {String} keyName The name of the property to retrieve
|
||||
@param {Object} defaultValue The value to return if the property value is undefined
|
||||
@returns {Object} The property value or the defaultValue.
|
||||
|
|
@ -9910,10 +9912,10 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
|
||||
/**
|
||||
Set the value of a property to the current value plus some amount.
|
||||
|
||||
|
||||
person.incrementProperty('age');
|
||||
team.incrementProperty('score', 2);
|
||||
|
||||
|
||||
@param {String} keyName The name of the property to increment
|
||||
@param {Object} increment The amount to increment by. Defaults to 1
|
||||
@returns {Object} The new property value
|
||||
|
|
@ -9923,13 +9925,13 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
set(this, keyName, (get(this, keyName) || 0)+increment);
|
||||
return get(this, keyName);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
Set the value of a property to the current value minus some amount.
|
||||
|
||||
|
||||
player.decrementProperty('lives');
|
||||
orc.decrementProperty('health', 5);
|
||||
|
||||
|
||||
@param {String} keyName The name of the property to decrement
|
||||
@param {Object} increment The amount to decrement by. Defaults to 1
|
||||
@returns {Object} The new property value
|
||||
|
|
@ -9943,9 +9945,9 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ {
|
|||
/**
|
||||
Set the value of a boolean property to the opposite of it's
|
||||
current value.
|
||||
|
||||
|
||||
starship.toggleProperty('warpDriveEnaged');
|
||||
|
||||
|
||||
@param {String} keyName The name of the property to toggle
|
||||
@returns {Object} The new property value
|
||||
*/
|
||||
|
|
@ -13433,7 +13435,7 @@ var invokeForState = {
|
|||
`Ember.View` is the class in Ember responsible for encapsulating templates of HTML
|
||||
content, combining templates with data to render as sections of a page's DOM, and
|
||||
registering and responding to user-initiated events.
|
||||
|
||||
|
||||
## HTML Tag
|
||||
The default HTML tag name used for a view's DOM representation is `div`. This can be
|
||||
customized by setting the `tagName` property. The following view class:
|
||||
|
|
@ -13459,7 +13461,7 @@ var invokeForState = {
|
|||
<div id="ember1" class="ember-view my-class my-other-class"></div>
|
||||
|
||||
`class` attribute values can also be set by providing a `classNameBindings` property
|
||||
set to an array of properties names for the view. The return value of these properties
|
||||
set to an array of properties names for the view. The return value of these properties
|
||||
will be added as part of the value for the view's `class` attribute. These properties
|
||||
can be computed properties:
|
||||
|
||||
|
|
@ -13488,7 +13490,7 @@ var invokeForState = {
|
|||
|
||||
<div id="ember1" class="ember-view hovered"></div>
|
||||
|
||||
When using boolean class name bindings you can supply a string value other than the
|
||||
When using boolean class name bindings you can supply a string value other than the
|
||||
property name for use as the `class` HTML attribute by appending the preferred value after
|
||||
a ":" character when defining the binding:
|
||||
|
||||
|
|
@ -13566,11 +13568,11 @@ var invokeForState = {
|
|||
<div id="ember1" class="ember-view disabled"></div>
|
||||
|
||||
|
||||
Updates to the the value of a class name binding will result in automatic update
|
||||
Updates to the the value of a class name binding will result in automatic update
|
||||
of the HTML `class` attribute in the view's rendered HTML representation.
|
||||
If the value becomes `false` or `undefined` the class name will be removed.
|
||||
|
||||
Both `classNames` and `classNameBindings` are concatenated properties.
|
||||
Both `classNames` and `classNameBindings` are concatenated properties.
|
||||
See `Ember.Object` documentation for more information about concatenated properties.
|
||||
|
||||
## HTML Attributes
|
||||
|
|
@ -13616,7 +13618,7 @@ var invokeForState = {
|
|||
}.property()
|
||||
})
|
||||
|
||||
Updates to the the property of an attribute binding will result in automatic update
|
||||
Updates to the the property of an attribute binding will result in automatic update
|
||||
of the HTML attribute in the view's rendered HTML representation.
|
||||
|
||||
`attributeBindings` is a concatenated property. See `Ember.Object` documentation
|
||||
|
|
@ -13707,7 +13709,7 @@ var invokeForState = {
|
|||
primary templates, layouts can be any function that accepts an optional context
|
||||
parameter and returns a string of HTML that will be inserted inside view's tag. Views whose HTML
|
||||
element is self closing (e.g. `<input />`) cannot have a layout and this property will be ignored.
|
||||
|
||||
|
||||
Most typically in Ember a layout will be a compiled Ember.Handlebars template.
|
||||
|
||||
A view's layout can be set directly with the `layout` property or reference an
|
||||
|
|
@ -13732,7 +13734,7 @@ var invokeForState = {
|
|||
See `Handlebars.helpers.yield` for more information.
|
||||
|
||||
## Responding to Browser Events
|
||||
Views can respond to user-initiated events in one of three ways: method implementation,
|
||||
Views can respond to user-initiated events in one of three ways: method implementation,
|
||||
through an event manager, and through `{{action}}` helper use in their template or layout.
|
||||
|
||||
### Method Implementation
|
||||
|
|
@ -13749,8 +13751,8 @@ var invokeForState = {
|
|||
### Event Managers
|
||||
Views can define an object as their `eventManager` property. This object can then
|
||||
implement methods that match the desired event names. Matching events that occur
|
||||
on the view's rendered HTML or the rendered HTML of any of its DOM descendants
|
||||
will trigger this method. A `jQuery.Event` object will be passed as the first
|
||||
on the view's rendered HTML or the rendered HTML of any of its DOM descendants
|
||||
will trigger this method. A `jQuery.Event` object will be passed as the first
|
||||
argument to the method and an `Ember.View` object as the second. The `Ember.View`
|
||||
will be the view whose rendered HTML was interacted with. This may be the view with
|
||||
the `eventManager` property or one of its descendent views.
|
||||
|
|
@ -13784,7 +13786,7 @@ var invokeForState = {
|
|||
|
||||
Similarly a view's event manager will take precedence for events of any views
|
||||
rendered as a descendent. A method name that matches an event name will not be called
|
||||
if the view instance was rendered inside the HTML representation of a view that has
|
||||
if the view instance was rendered inside the HTML representation of a view that has
|
||||
an `eventManager` property defined that handles events of the name. Events not handled
|
||||
by the event manager will still trigger method calls on the descendent.
|
||||
|
||||
|
|
@ -13806,7 +13808,7 @@ var invokeForState = {
|
|||
// eventManager doesn't handle click events
|
||||
},
|
||||
mouseEnter: function(event){
|
||||
// will never be called if rendered inside
|
||||
// will never be called if rendered inside
|
||||
// an OuterView.
|
||||
}
|
||||
})
|
||||
|
|
@ -13827,7 +13829,7 @@ var invokeForState = {
|
|||
Form events: 'submit', 'change', 'focusIn', 'focusOut', 'input'
|
||||
|
||||
HTML5 drag and drop events: 'dragStart', 'drag', 'dragEnter', 'dragLeave', 'drop', 'dragEnd'
|
||||
|
||||
|
||||
## Handlebars `{{view}}` Helper
|
||||
Other `Ember.View` instances can be included as part of a view's template by using the `{{view}}`
|
||||
Handlebars helper. See `Handlebars.helpers.view` for additional information.
|
||||
|
|
@ -15374,7 +15376,7 @@ var DOMManager = {
|
|||
element = prevView.$();
|
||||
element.after(newView.$());
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -18373,7 +18375,7 @@ var get = Ember.get, set = Ember.set;
|
|||
Respectively, loading the page at the URL '#/alphabeta' would detect the route property of
|
||||
'root.bRoute' ('/alphabeta') and transition the router first to the state named 'root' and
|
||||
then to the substate 'bRoute'.
|
||||
|
||||
|
||||
## Adding Nested Routes to a Router
|
||||
Routes can contain nested subroutes each with their own `route` property describing the nested
|
||||
portion of the URL they would like to detect and handle. Router, like all instances of StateManager,
|
||||
|
|
@ -18381,27 +18383,27 @@ var get = Ember.get, set = Ember.set;
|
|||
intermediary state when detecting URLs, a Route with nested routes must define both a base `route`
|
||||
property for itself and a child Route with a `route` property of `'/'` which will be transitioned
|
||||
to when the base route is detected in the URL:
|
||||
|
||||
|
||||
Given the following application code:
|
||||
|
||||
App = Ember.Application.create({
|
||||
Router: Ember.Router.extend({
|
||||
root: Ember.Route.extend({
|
||||
aRoute: Ember.Route.extend({
|
||||
route: '/theBaseRouteForThisSet',
|
||||
|
||||
route: '/theBaseRouteForThisSet',
|
||||
|
||||
indexSubRoute: Ember.Route.extend({
|
||||
route: '/',
|
||||
}),
|
||||
|
||||
|
||||
subRouteOne: Ember.Route.extend({
|
||||
route: '/subroute1
|
||||
}),
|
||||
|
||||
|
||||
subRouteTwo: Ember.Route.extend({
|
||||
route: '/subRoute2'
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -18410,10 +18412,10 @@ var get = Ember.get, set = Ember.set;
|
|||
|
||||
When the application is loaded at '/theBaseRouteForThisSet' the Router will transition to the route
|
||||
at path 'root.aRoute' and then transition to state 'indexSubRoute'.
|
||||
|
||||
|
||||
When the application is loaded at '/theBaseRouteForThisSet/subRoute1' the Router will transition to
|
||||
the route at path 'root.aRoute' and then transition to state 'subRouteOne'.
|
||||
|
||||
|
||||
## Route Transition Events
|
||||
Transitioning between Ember.Route instances (including the transition into the detected
|
||||
route when loading the application) triggers the same transition events as state transitions for
|
||||
|
|
@ -20803,7 +20805,7 @@ EmberHandlebars.ViewHelper = Ember.Object.create({
|
|||
Will result in HTML structure:
|
||||
|
||||
<body>
|
||||
<!-- Note: the handlebars template script
|
||||
<!-- Note: the handlebars template script
|
||||
also results in a rendered Ember.View
|
||||
which is the outer <div> here -->
|
||||
|
||||
|
|
@ -20825,7 +20827,7 @@ EmberHandlebars.ViewHelper = Ember.Object.create({
|
|||
})
|
||||
|
||||
aView.appendTo('body')
|
||||
|
||||
|
||||
Will result in HTML structure:
|
||||
|
||||
<div id="ember1" class="ember-view">
|
||||
|
|
@ -20899,7 +20901,7 @@ EmberHandlebars.ViewHelper = Ember.Object.create({
|
|||
Will result in the following HTML:
|
||||
|
||||
<div id="ember1" class="ember-view">
|
||||
<div id="ember2" class="ember-view a-custom-view-class-as-property">
|
||||
<div id="ember2" class="ember-view a-custom-view-class-as-property">
|
||||
hi
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21059,7 +21061,7 @@ var get = Ember.get, getPath = Ember.Handlebars.getPath, fmt = Ember.String.fmt;
|
|||
<p class="ember-view greeting">Howdy Mary</p>
|
||||
<p class="ember-view greeting">Howdy Sara</p>
|
||||
</div>
|
||||
|
||||
|
||||
@name Handlebars.helpers.collection
|
||||
@param {String} path
|
||||
@param {Hash} options
|
||||
|
|
@ -21380,7 +21382,7 @@ ActionHelper.registerAction = function(actionName, options) {
|
|||
The `{{action}}` helper registers an HTML element within a template for
|
||||
DOM event handling and forwards that interaction to the Application's router,
|
||||
the template's `Ember.View` instance, or supplied `target` option (see 'Specifiying a Target').
|
||||
|
||||
|
||||
User interaction with that element will invoke the supplied action name on
|
||||
the appropriate target.
|
||||
|
||||
|
|
@ -21425,7 +21427,7 @@ ActionHelper.registerAction = function(actionName, options) {
|
|||
If you need the default handler to trigger you should either register your
|
||||
own event handler, or use event methods on your view class. See Ember.View
|
||||
'Responding to Browser Events' for more information.
|
||||
|
||||
|
||||
### Specifying DOM event type
|
||||
|
||||
By default the `{{action}}` helper registers for DOM `click` events. You can
|
||||
|
|
@ -21445,23 +21447,23 @@ ActionHelper.registerAction = function(actionName, options) {
|
|||
`Ember.EventDispatcher` instance will be created when a new
|
||||
`Ember.Application` is created. Having an instance of `Ember.Application`
|
||||
will satisfy this requirement.
|
||||
|
||||
|
||||
|
||||
|
||||
### Specifying a Target
|
||||
There are several possible target objects for `{{action}}` helpers:
|
||||
|
||||
|
||||
In a typical `Ember.Router`-backed Application where views are managed
|
||||
through use of the `{{outlet}}` helper, actions will be forwarded to the
|
||||
current state of the Applications's Router. See Ember.Router 'Responding
|
||||
to User-initiated Events' for more information.
|
||||
|
||||
|
||||
If you manaully set the `target` property on the controller of a template's
|
||||
`Ember.View` instance, the specifed `controller.target` will become the target
|
||||
for any actions. Likely custom values for a controller's `target` are the
|
||||
controller itself or a StateManager other than the Application's Router.
|
||||
|
||||
|
||||
If the templates's view lacks a controller property the view itself is the target.
|
||||
|
||||
|
||||
Finally, a `target` option can be provided to the helper to change which object
|
||||
will receive the method call. This option must be a string representing a
|
||||
path to an object:
|
||||
|
|
@ -21516,7 +21518,7 @@ ActionHelper.registerAction = function(actionName, options) {
|
|||
|
||||
Will throw `Uncaught TypeError: Cannot call method 'call' of undefined` when
|
||||
"click me" is clicked.
|
||||
|
||||
|
||||
### Specifying a context
|
||||
|
||||
By default the `{{action}}` helper passes the current Handlebars context
|
||||
|
|
@ -21724,7 +21726,7 @@ var set = Ember.set, get = Ember.get;
|
|||
/**
|
||||
@class
|
||||
|
||||
Creates an HTML input of type 'checkbox' with HTML related properties
|
||||
Creates an HTML input of type 'checkbox' with HTML related properties
|
||||
applied directly to the input.
|
||||
|
||||
{{view Ember.Checkbox classNames="applicaton-specific-checkbox"}}
|
||||
|
|
@ -21743,7 +21745,7 @@ var set = Ember.set, get = Ember.get;
|
|||
through the Ember object or by interacting with its rendered element representation
|
||||
via the mouse, keyboard, or touch. Updating the value of the checkbox via jQuery will
|
||||
result in the checked value of the object and its element losing synchronization.
|
||||
|
||||
|
||||
## Layout and LayoutName properties
|
||||
Because HTML `input` elements are self closing `layout` and `layoutName` properties will
|
||||
not be applied. See `Ember.View`'s layout section for more information.
|
||||
|
|
@ -21855,7 +21857,7 @@ var get = Ember.get, set = Ember.set;
|
|||
## Layout and LayoutName properties
|
||||
Because HTML `input` elements are self closing `layout` and `layoutName` properties will
|
||||
not be applied. See `Ember.View`'s layout section for more information.
|
||||
|
||||
|
||||
@extends Ember.TextSupport
|
||||
*/
|
||||
Ember.TextField = Ember.View.extend(Ember.TextSupport,
|
||||
|
|
@ -22032,7 +22034,7 @@ var get = Ember.get, set = Ember.set;
|
|||
|
||||
## Layout and LayoutName properties
|
||||
|
||||
Because HTML `textarea` elements do not contain inner HTML the `layout` and `layoutName`
|
||||
Because HTML `textarea` elements do not contain inner HTML the `layout` and `layoutName`
|
||||
properties will not be applied. See `Ember.View`'s layout section for more information.
|
||||
|
||||
@extends Ember.TextSupport
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user