Filter components by url

You can filter components by specifying a url pattern for your instanceDefinition and then add the url fragment you want to filter on to the filter passed to the refresh method.

You can use any of the url patterns that Backbone supports as value for the urlPattern property on your instanceDefinition. The componentManager will filter out components that matches the url fragment passed to the filter and instantiate them with a urlParams object and a urlParamsCollection passed to the constructor function.

Take a look at components.js to see component the setup for this example.

conditions:0components:1instances:7

var componentSettings = {
  components: [{
    id: 'filter-url-component',
    src: 'ExampleComponent'
  }],
  targets: {
    main: [
      {
        id: 'filter-url-instance-1',
        componentId: 'filter-url-component',
        order: 1,
        args: {
          id: 'id: 1',
          urlPattern: 'passing-arguments/:type/:id',
          background: 'coral'
        },
        urlPattern: 'passing-arguments/:type/:id'
      },
      {
        id: 'filter-url-instance-2',
        componentId: 'filter-url-component',
        order: 2,
        args: {
          id: 'id: 2',
          urlPattern: 'passing-arguments/:type/:id',
          background: 'pink'
        },
        urlPattern: 'passing-arguments/:type/:id',
        reInstantiate: true
      },
      {
        id: 'filter-url-instance-3',
        componentId: 'filter-url-component',
        order: 3,
        args: {
          id: 'id: 3',
          urlPattern: 'splat/*path',
          background: 'yellow'
        },
        urlPattern: 'splat/*path'
      },
      {
        id: 'filter-url-instance-4',
        componentId: 'filter-url-component',
        order: 4,
        args: {
          id: 'id: 4',
          urlPattern: 'optional/:section(/:subsection)',
          background: 'Aquamarine '
        },
        urlPattern: 'optional/:section(/:subsection)'
      },
      {
        id: 'filter-url-instance-5',
        componentId: 'filter-url-component',
        order: 5,
        args: {
          id: 'id: 5',
          urlPattern: 'optional/:section(/:subsection)(/:id)',
          background: 'silver'
        },
        urlPattern: 'optional/:section(/:subsection)(/:id)'
      },
      {
        id: 'filter-url-instance-6',
        componentId: 'filter-url-component',
        order: 6,
        args: {
          id: 'id: 6',
          urlPattern: 'global',
          background: 'aqua'
        },
        urlPattern: 'global'
      },
      {
        id: 'filter-url-instance-7',
        componentId: 'filter-url-component',
        order: 7,
        args: {
          id: 'id: 7',
          urlPattern: '["some-url/:id", "some-other-url(/:year)(/:month)(/:day)"]',
          background: '#58EBA9'
        },
        urlPattern: ['some-url/:id', 'some-other-url(/:year)(/:month)(/:day)']
      }
    ]
  }
}
active filter

Try filtering the components using the different links below. View each matching instance to see their urlPatterns and what data they where instantiated with.

Note that the instances that flashes when you navigate between the links does not get reinstantiated, they match multiple urlPatterns and receive new urlParams whenever the refresh method gets called with a new filter (assuming they still match the filter).

controls
Click to Reset Filter

  • Url parameters

    In this example the links below will match the urlPattern: 'passing-arguments/:type/:id' and pass type and id as urlParams to each matching instance.

    Note that the second matching instance has reInstantiate set to true which makes the componentManager dispose and recreate that instance when going between the two different urls while the first instance has a short flash animation to indicate that it recieved new data (in this case urlParams) without reinstantiate.

    #passing-arguments/news/political#passing-arguments/news/domestic

  • Optional url parameters

    In this example the link below will match the urlPattern: 'optional/:section(/:subsection)' and the urlPattern: 'optional/:section(/:subsection)(/:id)'.

    #optional/arguments#optional/arguments/can-be-optional#optional/arguments/can-be-optional/my-id

  • Splats

    In this example the link below will match the urlPattern: 'splat/*path' and pass everything in the url after 'splat/' to the instances urlParams.

    #splat/a/lot/of/sub/sections/in/the/url

  • Global urlPatterns

    Instances with the urlPatterns set to 'global' will match any url that was passed to the filter urlPattern: 'global'

    Note that instance 6 is present on all the different example links since it uses the 'global' urlPattern and matches any url that is passed in the filter.

    #a-random-url

  • Multiple urlPatterns

    Each instanceDefinition may have an array with multiple urlPatterns as value for the urlPattern property. In that case the instance will be matched against both urlPatterns and if the url in the filter matches any of the patterns the instance will be created (assuming all other filters passes as well).

    urlPattern: ['multiple-url-patterns/:id', 'multiple-url-patterns2/:id']

    #some-url/1/2#some-other-url/2015/10/1
.component-area--main