Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unplugandplay/opal-praha
An opal-vienna rewrite with Convention over Configuration in mind
https://github.com/unplugandplay/opal-praha
Last synced: 2 months ago
JSON representation
An opal-vienna rewrite with Convention over Configuration in mind
- Host: GitHub
- URL: https://github.com/unplugandplay/opal-praha
- Owner: unplugandplay
- License: mit
- Created: 2015-10-11T18:52:15.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-10-12T06:36:01.000Z (over 9 years ago)
- Last Synced: 2024-07-05T15:06:18.535Z (6 months ago)
- Language: Ruby
- Homepage:
- Size: 195 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-opal - Opal Praha - An opal-vienna rewrite with Convention over Configuration in mind (Uncategorized / Uncategorized)
README
# Praha: Client side MVC framework for Opal
Next step: the release of THE [TodoMVC](http://todomvc.com) implementation.
## Installation
Add opal-praha to your ```Gemfile``` with a reference to the Github source.
```ruby
gem 'opal-praha'
```
If you're compiling opal in a static application, make sure to require bundler first.
```ruby
require 'bundler'
Bundler.require
```
## Model
Client side models.
```ruby
class Book < Praha::Model
attributes :title, :author
end
book = Book.new(title: 'My awesome book', author: 'Bob')
book.title = 'Bob: A story of awesome'
```
### Attributes
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:
```ruby
class Book < Praha::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
# => #
```
## Views
`Praha::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:
```html
Hi
```
We can create our view like so:
```ruby
class MyView < Praha::View
element '#foo'
end
MyView.new.element
# => #]>
```
A real, existing, element can also be passed into the class method:
```ruby
class MyView < Praha::View
# Instances of this view will have the document as an element
element Document
end
```
Views can have parents. If a child view is created, then the dom selector is
only searched inside the parents element.
### Customizing elements
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.
```ruby
class NavigationView < Praha::View
def tag_name
:ul
end
def class_name
"navbar navbar-blue"
end
end
```
### Rendering views
Views have a placeholder `render` method, that doesnt do anything by default.
This is the place to put rendering logic.
```ruby
class MyView < Praha::View
def render
element.html = 'Welcome to my rubyicious page'
end
end
view = MyView.new
view.render
view.element
# => '
Welcome to my rubyicious page'
```
### Listening for events
When an element is created, defined events can be added to it. When a view is
destroyed, these event handlers are then removed.
In Praha, event listening is done directly in the HTML or HAML
```haml
.view
%input.toggle(opal-click){type: "checkbox", checked: @todo.completed}
%label.editable(opal-dblclick)= @todo.title
%button.destroy(opal-click)
.form
%input.edit(opal-focusout="finish_editing" opal-press-enter="finish_editing"){value: @todo.title}
```
### Customizing element creation
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
```ruby
class NavigationView < Praha::View
def initialize(parent, selector)
@parent, @selector = parent, selector
end
def create_element
@parent.find(@selector)
end
end
```
Assuming we have the html:
```html
```
We can use the navigation view like this:
```ruby
@header = Element.find '#header'
nav_view = NavigationView.new @header, '.navigation'
nav_view.element
# => [