Building a Simple Component

Building a Simple Component As a user looks through our list of rentals, they may want to have some interactive options to help them make a decision. Let's add the ability to toggle the size of the image for each rental. To do this, we'll use a component. Let's generate a rental-listing component that will manage the behavior for each of our rentals. A dash is required in every component name to avoid conflicting with a possible HTML element, so rental-listing is acceptable but rental isn't.

Ember.mixin()

mixin (obj, mixins) private Defined in packages/ember-metal/lib/mixin.js:386 Parameters: obj mixins Returns: obj

HashLocation#replaceURL()

replaceURL (path) private Defined in packages/ember-routing/lib/location/hash_location.js:86 Uses location.replace to update the url without a page reload or history modification. Parameters: path String

Test#onInjectHelpers()

onInjectHelpers (callback) public Defined in packages/ember-testing/lib/test/on_inject_helpers.js:3 Used to register callbacks to be fired whenever App.injectTestHelpers is called. The callback will receive the current application as an argument. Example: Ember.Test.onInjectHelpers(function() { Ember.$(document).ajaxSend(function() { Test.pendingRequests++; }); Ember.$(document).ajaxComplete(function() { Test.pendingRequests--; }); }); Parameters: callback Function Th

DS.Model#id

id{String} Defined in addon/-private/system/model/model.js:282 All ember models have an id property. This is an identifier managed by an external source. These are always coerced to be strings before being used internally. Note when declaring the attributes for a model it is an error to declare an id attribute. var record = store.createRecord('model'); record.get('id'); // null store.findRecord('model', 1).then(function(model) { model.get('id'); // '1' });

DS.Store#fetchRecord()

fetchRecord (internalModel) Promiseprivate Defined in addon/-private/system/store.js:710 This method is called by findRecord if it discovers that a particular type/id pair hasn't been loaded yet to kick off a request to the adapter. Parameters: internalModel InternalModel model Returns: Promise promise

Ember.computed.sum()

sum (dependentKey) Ember.ComputedPropertypublic Defined in packages/ember-runtime/lib/computed/reduce_computed_macros.js:63 Available since 1.4.0 A computed property that returns the sum of the values in the dependent array. Parameters: dependentKey String Returns: Ember.ComputedProperty computes the sum of all values in the dependentKey's array

RoutingService

RoutingService Class PRIVATE Defined in: packages/ember-routing/lib/services/routing.js:13 Module: ember-routing The Routing service is used by LinkComponent, and provides facilities for the component/view layer to interact with the router. While still private, this service can eventually be opened up, and provides the set of API needed for components to control routing without interacting with router internals.

EngineInstance#boot()

boot (options) Promiseprivate Defined in packages/ember-application/lib/system/engine-instance.js:61 Initialize the Ember.EngineInstance and return a promise that resolves with the instance itself when the boot process is complete. The primary task here is to run any registered instance initializers. See the documentation on BootOptions for the options it takes. Parameters: options Object Returns: Promise

Routes and Templates

Routes and Templates Ember uses routes to define logical, addressable pages within our application. In Super Rentals we want to arrive at a home page which shows a list of rentals. From there, we should be able to navigate to an about page and a contact page. Let's start by building our "about" page. Remember, when the URL path /about is loaded, the router will map the URL to the route handler of the same name, about.js. The route handler then loads a template. An About Route If we run ember