Category: Ember

Component templates can leave one or more placeholders that users can fill with their own HTML. These are called blocks. Here’s an example that provides a component with the implicit default block. <ExampleComponent> This is the default <b>block content</b> that will replace `{{yield}}` (or `{{yield to=”default”}}`) in the `ExampleComponent` template. </ExampleComponent> This is equivalent to…

In a template, you can use if to conditionally render content. There are 2 styles of if: block and inline. Additionally, you can use template helpers like concat within a conditional. For the example below, if @color has a truthy value, such as ‘navy’, the div classes will include badge-navy: Block if  Motivation  Let’s take a look at two components that display a person’s username. app/components/received-message/username.hbs app/components/sent-message/username.hbs The…

Components become useful building blocks of our app if we make them reusable. When we reuse components efficiently, we can avoid having to recreate parts of our app again and again. If you want to reuse a component in multiple places, you’ll need a way to template out parts of it. Let’s start with two similar but not…

You could put all of your application HTML into a single file, but in practice, you’ll probably want to break it apart into smaller files. In Ember, those smaller pieces are called components. Let’s start with the sample HTML for a messaging app (that we introduced in the previous chapter, if you’re reading the guides in order): app/templates/application.hbs…

At its core, Ember’s UIs are HTML driven – every part of the UI that is shown to the user is defined in an HTML template somewhere in your application. Because of this, templates are central to Ember, and one of the most important parts of the framework. We’ll discuss the capabilities and core concepts of templates…

In this chapter, we will remove the hard-coded data from our <Rental> component. By the end, your app would finally be displaying real data that came from the server: In this chapter, you will learn about: Working with route files Returning local data from the model hook Accessing route models from templates Mocking server data with static…

The last missing feature for the <Rental> component is a map to show the location of the rental, which is what we’re going to work on next: While adding the map, you will learn about: Managing Application-level Configurations  We will use the Mapbox API to generate maps for our rental properties. You can sign up for free and without a credit…

In this chapter, you will add interactivity to the page, allowing the user to click an image to enlarge or shrink it: While doing so, you will learn about: Adding Behavior to Components with Classes  So far, all the components we have written are purely presentational—they are simply reusable snippets of markup. That’s pretty cool! But…

It’s time to finally work on the rentals listing: While building this list of rental properties, you will learn about: Generating Components  Let’s start by creating the <Rental> component. This time, we will use the component generator to create the template and test file for us: The generator created two new files for us, a component template…

In this chapter, you will refactor your existing templates to use components. We will also be adding a site-wide navigation bar: In doing so, you will learn about: Extracting markup into components Invoking components Passing content to components Yielding content with the {{yield}} keyword Refactoring existing code Writing component tests Using the application template and {{outlet}}s Extracting Markup into Components …