opal-konckout is wraper of knockout.js.
Add this line to your application's Gemfile:
gem 'opal-knockout'
And then execute:
$ bundle
Or install it yourself as:
$ gem install opal-knockout
source 'https://rubygems.org'
gem 'opal-knockout'
source 'https://rails-assets.org' do
gem 'rails-assets-knockoutjs', '3.3.0'
end
app/assets/javascripts/user_view_model.rb
class User
attr_accessor :first_name, :last_name
def initialize(first_name, last_name)
self.first_name = first_name
self.last_name = last_name
end
end
class UserViewModel < Knockout::ViewModel
attr_observable :first_name, :last_name
attr_observable_array :users
attr_computed :full_name, :show_full_name
def initialize(first_name, last_name)
self.first_name = first_name
self.last_name = last_name
end
def add_users
self.users.push(User.new(
self.first_name.to_s,
self.last_name.to_s
)
)
clear_form
end
private
def show_full_name
"#{first_name.to_s} #{last_name.to_s}"
end
def clear_form
self.first_name = ''
self.last_name = ''
end
end
app/assets/javascripts/application.rb
#= require opal
#= require knockoutjs
#= require opal-knockout
#= require_tree .
#= require_self
$root_view_model = Knockout::RootViewModel.new(
user: UserViewModel.new('Taro', 'Yamada')
)
Knockout.apply_bindings($root_view_model)
app/views/users/index.html.slim
div data-bind="with: user"
form
label
| First Name
input type="text" data-bind="textInput: first_name"
br
label
| Last Name
input type="text" data-bind="textInput: last_name"
p data-bind="text: full_name"
button type="button" data-bind="click: $add_users"
ul data-bind="foreach: users"
li
span data-bind="text: first_name"
|
span data-bind="text: last_name"
- Fork it ( https://github.com/patorash/opal-knockout/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request