Array Controllers in Ember.js

An array controller is a wrapper for a collection of objects, and provides convenient methods for dealing with its contents.

An array controller’s model is typically set in a route, for example:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      {name: 'red'},
      {name: 'yellow'},
      {name: 'blue'}
    ];
  }
});
// (The Index ArrayController is setup implicitly)

Setting an array controller’s model sets up its content property, which forms the basis for other properties and methods.

arrangedContent

arrangedContent is an important property, defined as “the array that the [array controller] pretends to be”. It provides a way for sorted/filtered content to be stored separately from the original content. In this way, sorting/filtering is not destructive, and the content (in its original form) can still be retrieved.

By default, when an array controller has no sortProperties, arrangedContent and content are the same. When sortProperties are added, the sorted content is stored in arrangedContent whilst the original content remains untouched.

It’s important to note that an array controller should be treated just like an array, with its items referencing those in arrangedContent. Accessing items on an array controller itself, is effectively the same as accessing items in arrangedContent (an important difference is discussed in below).

This is best illustrated with some examples. Given the route above, the following #each loops all result in the same output:

index template:

{{#each}} {{name}} {{/each}}

{{#each content}} {{name}} {{/each}}

{{#each arrangedContent}} {{name}} {{/each}}

Setting sortProperties results in sorted output from arrangedProperty and therefore from the array controller instance itself:

App.IndexController = Ember.ArrayController.extend({
  sortProperties: ['name']
});

index template:

{{!-- Sorted by name --}}
{{#each}} …

{{!-- Not Sorted --}}
{{#each content}} …

{{!-- Sorted by name --}}
{{#each arrangedContent}} …

Item Controllers

Adding an itemController property to an array controller wraps each item in an instance of the referenced controller. However, this only applies when accessing items through the array controller instance itself. Items accessed via arrangedContent or content remain unwrapped. This is the key difference when accessing items via arrangedContent versus accessing them via the array controller instance itself.

The following example demonstrates this concept:

App.IndexController = Ember.ArrayController.extend({
  itemController: 'color'
});

App.ColorController = Ember.ObjectController.extend({
  isActive: true
});

index template:

{{!-- Names rendered --}}
{{#each}}
  {{#if isActive}} {{name}} {{/if}}
{{/each}}

{{!-- Nothing rendered --}}
{{#each content}}
  {{#if isActive}} {{name}} {{/if}}
{{/each}}

{{!-- Nothing rendered --}}
{{#each arrangedContent}}
  {{#if isActive}} {{name}} {{/if}}
{{/each}}

Nothing is rendered in the loops that iterate over content or arrangedContent because the items are not wrapped in an item controller and therefore isActive is inaccessible.

{{#each itemController='…'}}

{{#each}} helpers, when supplied with an itemController property, wrap each item in a new instance of the referenced controller. This operates entirely independently from the itemController property on an array controller: an array controller will not have access to any item controller created via an {{#each}} helper.

This becomes particularly important when implementing a computed property on an array controller that depends on properties on an item controller. See the example.

For more information:


Portable

Man on bus holds old 1980s ghetto blaster

London, 2014


Don Norman’s Law

If you think something is clever and sophisticated beware—it is probably self-indulgence.

Don Norman The Psychology of Everyday Things

The Putter

A short film about assembling scissors at Ernest Wright and Son (via Vicki Turner).


David Shrigley Tableware

Absolutely love these pieces by David Shrigley for Soho’s Sketch restaurant. Seen in an interview with Shrigley in City A.M’s Bespoke magazine.

Salt and pepper shakers with 'Dust', 'Dirt', and 'Nothing' written on them Shrigley teapot and accessories

Bali 2014

A few thoughts and photos from my trip to Bali with Helen last month.

Sanur and Ubud

Our first stay was right on the beach, in the resort of Sanur. It’s a quiet place, particularly compared to Denpasar (the capital) and Ubud, our second destination…

14-05_5803_kodak-disposable_kodak-disposable-800_32

The view from our hotel beach in Sanur, looking south. (Excuse the photo quality, it was taken on a disposable.)

14-05_5798_olympus-mju-v_kodak-200-8_22

The view at breakfast: a fisherman wading out at sea.

Ubud is further inland, about 40 minutes north of Sanur. It’s known for its arts scene and there were plenty of market stalls selling handcrafted goods. We of course took our chance to do a bit of bartering! (We bought a couple of kites and a small wooden owl!)

14-05_5875_olympus-mju-ii_kodak-gold-200_30

A market seller un Ubud prepares flower petals to sell for for Hindu offerings.

We stayed at Uma, a luxury hotel located a short distance from the centre. The whole experience was pretty amazing: the room, the food, and the pool were all top notch!

14-05_5803_kodak-disposable_kodak-disposable-800_01

On our last morning we went on a short guided walk through the local rice fields in Ubud.

Temples

Hinduism is a huge part of Balinese life, so there are temples (Pura) and offerings everywhere. Many temples are in spectacular locations: on the edge of a cliff, on a lake, or on a rock heading out to sea.

Uluwatu Temple

Pura Luhur Uluwatu.

14-05_5800_olympus-mju-ii_kodak-200-8_35

The Kecak dance at Pura Luhur Uluwatu.

14-05_5802_olympus-mju-ii_kodak-gold-200_11

Pura Ulun Danu Bratan.

Rice Fields

Rice fields make up a big part of the landscape in Bali. We hired a driver who took us on a trip round some windy mountain roads to check out the Jatiluwih rice terraces, the largest in Bali. The terraces were vast, and the views spectacular (unfortunately difficult to capture on camera!).

14-05_5798_olympus-mju-v_kodak-200-8_29 14-05_5798_olympus-mju-v_kodak-200-8_30

Activities

We went on a few guided tours to various places on the island. One of my favourites was a bike ride down a mountain. It was a great chance to explore some of the mountain villages that we’d previously driven through.

14-05_5875_olympus-mju-ii_kodak-gold-200_12

Overlooking a mountain village at the start of our bike ride. Those decorated arching bamboo poles (Penjor) were up to celebrate Galungan, an annual festival celebrating the victory of good over evil.

Dog’s Bollocks

The gentleman that let us have a tour of his house.

14-05_5875_olympus-mju-ii_kodak-gold-200_14

A girl at a coffee plantation.

We also went white water rafting, and snorkelling, which included a boat ride on one of these: 14-05_5803_kodak-disposable_kodak-disposable-800_24

Jukung boats at Padang Bai, where we explored the coral reef and swam with the fishes.

Food

The food in Bali was pretty good. Lots of rice and some really good barbecued fish and meat. Unfortunately, no matter how careful we were with what we ate, we still managed to get a bout of Bali Belly, which was rather uncomfortable for the last few days of the holiday (and plane ride!). Luckily it didn’t really stop us from doing much.

14-05_5875_olympus-mju-ii_kodak-gold-200_22

Barbecued ribs at Naughty Nuri’s.

14-05_5875_olympus-mju-ii_kodak-gold-200_20

The bar at Naughty Nuri’s.

Monkeys

We saw quite a few of these mischievous monkeys, particularly around Uluwatu. They will grab almost anything (mostly sunglasses), even flip flops off your feet! Fortunately we had been forewarned, and left all our loose items in the car.

14-05_5800_olympus-mju-ii_kodak-200-8_26

Put Things In Their Places: Benjamin Franklin’s Schedule

Benjamin Franklin’s Schedule

via Nick Bilton & The Busy Person's Guide to the Done List by iDoneThis


Hong Kong 2014

Here are a few thoughts and photos from my trip to Hong Kong with Helen last month.

Skyline

Hong Kong’s skyline is incredible, but I didn’t fully appreciate it until I saw a clear and uninterrupted view at night from Tsim Sha Tsui (TST), Kowloon (below). Up until then, I’d been most amazed by the unmissable apartment blocks. Each block is slightly different, decorated by windows, air conditioning units, and washing lines.

14-05_5799_olympus-mju-ii_kodak-gold-200_35

Hong Kong Island from TST.

14-05_5799_olympus-mju-ii_kodak-gold-200_11

Apartment blocks and escalator.

Trams and Markets

We took a tram ride from Central Hong Kong to Shau Kei Wan on the east-side of the island. It was a great way to get a feel for the city, and cheap too (2.30HKD ~ 18p!). The windows can be pushed all the way down, so (if it’s not raining) it’s a handy way to take a few pictures.

14-05_5799_olympus-mju-ii_kodak-gold-200_22 14-05_5799_olympus-mju-ii_kodak-gold-200_27

At Shau Kei Wan, we were met by a fish and grocery market, where it was common to see live fish flapping about in polystyrene containers, unusual fruits, and various other bits for sale in bowls and boxes, or just laying on a trolley on the street.

14-05_5799_olympus-mju-ii_kodak-gold-200_15 14-05_5799_olympus-mju-ii_kodak-gold-200_12 14-05_5800_olympus-mju-ii_kodak-200-8_10 14-05_5798_olympus-mju-v_kodak-200-8_16

Food

To experience some authentic Cantonese food, we ventured to Mak’s Noodle, a small diner not far from where we were staying. The food was very tasty, and when a waiter noticed I was having some difficulty with the noodles, he chopped them up with a pair of scissors (thankfully I wasn’t the only one needing some help!).

14-05_5800_olympus-mju-ii_kodak-200-8_01 14-05_5800_olympus-mju-ii_kodak-200-8_03

That chunk of beef on top was so tender!

Mid-level Escalators

The street escalators are one of the coolest parts of the city. Given the hills and humidity, being able to jump on an escalator in the middle of a street was a lifesaver!

14-05_5800_olympus-mju-ii_kodak-200-8_16

The Peak

For all its skyscrapers and apartment blocks, Hong Kong still has lots of greenery, and there is plenty of it to enjoy on the (steep) walk up Victoria Peak.

14-05_5798_olympus-mju-v_kodak-200-8_12

Kecak

I’ve just come back from spending the last couple of weeks in Hong Kong and Bali. One of my favourite experiences was attending a Kecak dance (pronounced keh-chak) at Pura Luhur Uluwatu, Bali. It was performed by around 50-100 people and the music was incredible.


Silverdale

Silverdale

View more posts in the archive