Component

class Component

A Component controls the appearance and elements inside a patch of the screen

It can render the elements programatically or directly with html content

Attributes:

  • bindings ({}):

    A dictionary containing the name and default value of attributes for the class which will also automatically add bound Observables

    The observables will have a _ (underscore) character appended.

    Setting the value of the attribute will trigger the observable and therefore any actions/subscriptions associated with it. Example:

    bindings = {‘myattr’: ‘myvalue’}

    will create:

    • An attribute myattr which defaults to myvalue

    • An observable myattr_

  • services ({}):

    A dictionary containing the name and service class for services defined for this and any child component of it

    services = {‘myservice’: MyService}

  • service_ns (False):

    If False, services will be added as direct attributes of the instance with the name specified in the services declaration.

    If service_ns is:

    • True: the declared services will be reachable under the attribute self._s.myservice

      This is meant to separate the services from the rest of the attributes.

    • A string, the declared services will be reachable under the attribute self.{value of the string}.myservice. I.e.: for a value of services_here, then a service would be reachable as:

      self.services_here.myservice

  • router

    Attribute which points to the router instance in charge of the application

  • route

    Attribute which contains the current active route snapshot

  • selector (None)

    The selector is the name of the html tag under which the component is rendered and controls elements.

    If None, the name will be automatically derived from the name of the class

  • htmlpath (True)

    Path to a file containing the html content.

    If True the name of the file will be derived automatically from the class name, i.e.: MyComponent -> my_component.html. In this case the file has to be placed at the same level in the file hierarchy as the python module in which the component class is defined.

    To derive the name: underscores will be placed in the upper/lower-case boundaries, everything will be lowercased and the extension .html will be appended.

    If it contains a name (string), this will be used to fetch the file from the server (or from a virtual file system if the app is delivered as a package)

    This takes precedence over the render method.

    After loading, the render method will be called with the node under which the content has been loaded

  • htmlsheet (None)

    This takes precedence over ``htmlpath``.

    If not None, this will then contain html content in text format, which will be used to render the patch

    If None, the name will be automatically derived from the name of the class.

    After loading, the render method will be called with the node under which the content has been loaded

  • stylepath (True)

    Path to a file containing the style sheet.

    If True the name of the file will be derived automatically from the class name, i.e.: MyComponent -> mycomponent.css. In this case the file has to be placed at the same level in the file hierarchy as the python module in which the component class is defined

    To derive the name: underscores will be placed in the upper/lower-case boundaries, everything will be lowercased and the extension .css will be appended.

    If it contains a name (string), this will be used to fetch the file from the server (or from a virtual file system if the app is delivered as a package)

    This takes precedence over the stlyer method.

    After loading, the html method will be called with the node under which the content has been loaded

  • stylesheet (None)

    If not None, this will then contain a style sheet in text format, which will be used to control the styles of the elements rendered by the component

    This takes precedence over ``stylepath``

  • cachesheets (True)

    If True, loaded html content and style sheets will be cached, rather than fetched again

  • cacheable (True)

    If True, the component will not be destroyed and recreated each time. Setting it to False forces destruction and recreation

render(node)

Render programmatically or manipulate loaded html content.

If htmlsheet or htmlpath are defined, this method will be called after the html content has been loaded. The content lives under node.

In any other case the method is expected to either:

  • render the html content programmatically

or

  • return text content which will be the html content to be added to the DOM

The parameter node is the DOM element under which either the loaded html content can be found or under which the programmatic rendering or returned text will be inserted.

styler()

Override this method to return the css to apply to the component. The returned format is just plain text

loading()

If the method load is not overridden, this will be called when the component is about to be loaded to the DOM

unloading()

If the method load is not overridden, this will be called when the component is about to be unloaded from the DOM

load(loading=True)

Called when the component is being loaded/unloaded to/from the DOM

If not overridden, it will

  • call self.loading() when loading=True

  • call self.unloading() when loading=False

classmethod selector_render(*args, **kwargs)

Used for rendering inside another component

can_deactivate()

Override this method to disallow navigating away from this component (and the associated route)

Returns: True/False or an Observable which will deliver those values.

If the final evaluated value is True navigating away is allowed

close_outlet()

To be used to navigate away from the component when it is loaded in a named outlet

class ComponentInline

This is a simple subclass of Component which defines htmlpath=None and stylepath=None for components that don’t have external html and css resources