Until a better README is out (shame on us) you can take a look at the Opal implementation of TodoMVC.
Client side models.
class Book < Vienna::Model
attributes :title, :author
end
book = Book.new(title: 'My awesome book', author: 'Bob')
book.title = 'Bob: A story of awesome'Attributes can be defined on subclasses using attributes. This simply defines
a getter/setter method using attr_accessor. You can override either method as
expected:
class Book < Vienna::Model
attributes :title, :release_date
# If date is a string, then we need to parse it
def release_date=(date)
date = Date.parse(date) if String === date
@release_date = date
end
end
book = Book.new(:release_date => '2013-1-10')
book.release_date
# => #<Date: 2013-1-10>Vienna::View is a simple wrapper class around a dom element representing a
view of some model (or models). A view's element is dynamically created when
first accessed. View.element can be used to specify a dom selector to find
the view in the dom.
Assuming the given html:
<body>
<div id="foo">
<span>Hi</span>
</div>
</body>We can create our view like so:
class MyView < Vienna::View
element '#foo'
end
MyView.new.element
# => #<Element: [<div id="foo">]>A real, existing, element can also be passed into the class method:
class MyView < Vienna::View
# Instances of this view will have the document as an element
element Document
endViews can have parents. If a child view is created, then the dom selector is only searched inside the parents element.
A View will render as a div tag, by default, with no classes (unless an
element selector is defined). Both these can be overriden inside your view
subclass.
class NavigationView < Vienna::View
def tag_name
:ul
end
def class_name
"navbar navbar-blue"
end
endViews have a placeholder render method, that doesnt do anything by default.
This is the place to put rendering logic.
class MyView < Vienna::View
def render
element.html = 'Welcome to my rubyicious page'
end
end
view = MyView.new
view.render
view.element
# => '<div>Welcome to my rubyicious page</div>'When an element is created, defined events can be added to it. When a view is destroyed, these event handlers are then removed.
class ButtonView < Vienna::View
on :click do |evt|
puts "clicked on button"
end
def tag_name
:button
end
endFor complex views, you can provide an optional css selector to scope the events:
class NavigationView < Vienna::View
on :click, 'ul.navbar li' do |evt|
puts "clicked: #{evt.target}"
end
on :mouseover, 'ul.navbar li.selected', :handle_mouseover
def handle_mouseover(evt)
# ...
end
endAs you can see, you can specify a method to handle events instead of a block.
You can also override create_element if you wish to have any custom element
creation behaviour.
For example, a subview that is created from a parent element
class NavigationView < Vienna::View
def initialize(parent, selector)
@parent, @selector = parent, selector
end
def create_element
@parent.find(@selector)
end
endAssuming we have the html:
<div id="header">
<img id="logo" src="logo.png" />
<ul class="navigation">
<li>Homepage</li>
</ul>
</div>We can use the navigation view like this:
@header = Element.find '#header'
nav_view = NavigationView.new @header, '.navigation'
nav_view.element
# => [<ul class="navigation">]Vienna::Router is a simple router that watches for hashchange events.
router = Vienna::Router.new
router.route("/users") do
puts "need to show all users"
end
router.route("/users/:id") do |params|
puts "need to show user: #{ params[:id] }"
end
# visit "example.com/#/users"
# visit "example.com/#/users/3"
# visit "example.com/#/users/5"
# => "need to show all users"
# => need to show user: 3
# => need to show user: 5Adds KVO style attribute observing.
class MyObject
include Vienna::Observable
attr_accessor :name
attr_reader :age
def age=(age)
@age = age + 10
end
end
obj = MyObject.new
obj.add_observer(:name) { |new_val| puts "name changed to #{new_val}" }
obj.add_observer(:age) { |new_age| puts "age changed to #{new_age}" }
obj.name = "bob"
obj.age = 42
# => "name changed to bob"
# => "age changed to 52"- Support older browsers which do not support onhashchange.
- Support not-hash style routes with HTML5 routing.
MIT