Views

The View is an important part of Sirius. But it has a difference from the "classical" View of other frameworks.

The View is a wrapper around HTMLElement. And View need for updating content, or attribute of an element.

Content

• base

• strategies

• zoom

• working with events

• binding ~> read Binding Section

How to create?

my_view = new Sirius.View("#my-element") 

You need to pass a selector for creating View.

Strategies

Describe how to manipulate content or attributes. For it Sirius has strategies. And manipulation happens in two steps:

1st - get new content or attribute

2nd - apply the strategy.

Let's see the next example:

my_view.render("new-content") # <- 1st step
.swap()                       # <- 2nd step

# as a result (html)
<div id="my-element">new content</div> 

For attribute that is the same, but pass argument of attribute in strategy method:

my_view.render("new-content") # <- 1st step
.swap('class')                # <- 2nd step, pass `class`

# result:

<div id="my-element" class="new-content"></div> 

At the current moment, Sirius has the support of

swap - replace content or attribute

clear - clear content or attribute

append - add content to the end

prepend - add content to the start

How to define own strategy?

A strategy is an object of 2 functions:

1st - transform, deal with old and new value

2nd - render - low-level method, which manipulate HTML elements

Let's see example, how to wrap all results in <strong> element:

Sirius.View.register_strategy('strong', # <- strategy name of course 
  # select a new value
  transform: (oldvalue, newvalue) -> 
   "<strong>#{newvalue}</strong>"

  # adapter - current adapter in the application
  # element - selector of the element 
  # result - the result of `render` function
  # attribute - attribute for wrap, by default it's 'text', but possible 'class', 'id' or any html attribute
  render: (adapter, element, result, attribute) ->
    if attribute == 'text' # call only for 'text' 
      adapter.get(element).innerHTML = result
    else
      throw new Error("'strong' strategy works only for 'text' attributes" 
)

# and usage
my_view.render("example").strong() 

# html

<div id="my-element"><strong>example</strong></div>

Nothing complicated.

How to quick change of transformation result

Pass second argument for Sirius.View, a transform function:

my_view = new Sirius.View("#my-element", (txt) -> "#{txt}!!!")

# call
my_view.render("example").swap() 

# result =>

<div id="my-element">example!!!</div>

Zooming

As you can see, that work with the root element is easy, but if you want to change the inner element? For this Sirius.View has the zoom method

<div id="my-element">
  <p>blablabla</p>
  <p>blablabla</p>
  <p>blablabla</p>
</div>

my_view.zoom("p").render("new content").swap()

# result => 

<div id="my-element">
  <p>new content</p>
  <p>new content</p>
  <p>new content</p>
</div>

Working with events

Use on method.

# selector - element for event,
# event_name - browser event (click, keypress, etc...)
# custom_event_name - generated when event_name occurs
# params - additional params for custom_event_name
on(selector, event_name, custom_event_name, params...)

Example:

# simple
my_view.on('p', 'click', (ev) -> console.log("click"))

# with custom_event_name

my_view.on('p', 'click', 'p:click', "param1", "param2", "param3")

# somewhere in application, function which handles 'p:click'

p_click_handler: (custom_event, event, p1, p2, p3) -> 
  # custom_event -> n.Event {type: "p:click", timeStamp: 1492544540463
  # event        -> n.Event {originalEvent: MouseEvent, type: "click", timeStamp: 1249
  console.log("click")