Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
1.5
1.5
  • Welcome
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Quick Start
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • UI Components
    • Component Overview
    • Rails Integration
    • Component Registry
    • General Component API
    • Haml Components
    • Reusing Views or Partials
    • Testing [WIP]
  • Reactivity
    • Reactivity Overview
    • Rails Integration
    • Actions
    • Forms
    • Async
    • Cable
    • Isolated
    • Collection
    • Custom Vue.js Components
    • Vue.js Event Hub
    • Vuex [WIP]
  • SPA-like Apps
    • SPA Overview
    • Rails Integration
    • App API
    • Page API
    • Transitions
    • Authorization
    • Tutorial
      • Creating a SPA-like App with Matestack
      • Essential Guide 1: Setup
      • Essential Guide 2: ActiveRecord & Database
      • Essential Guide 3: Person Index, Show, Transition
      • Essential Guide 4: Forms & Actions (Create, Update, Delete)
      • Essential Guide 5: Toggle Component
      • Essential Guide 6: Async Component
      • Essential Guide 7: Partials and custom components
      • Essential Guide 8: Collection and async component
      • Essential Guide 9: Custom Vue.js components
      • Essential Guide 10: Styling and Notifications
      • Essential Guide 11: Authentication
      • Essential Guide 12: Heroku Deployment with Postgres
      • Essential Guide 13: Wrap Up & Outlook
  • Components API
    • Core Components
      • Abbr
      • Address
      • Area
      • Article
      • Aside
      • B
      • Bdi
      • Bdo
      • Blockquote
      • Button
      • Br
      • Caption
      • Cite
      • Code
      • Data
      • Datalist
      • Dd
      • Del
      • Details
      • Dfn
      • Dialog
      • Div
      • Dl
      • Dt
      • Em
      • Fieldset
      • Figure
      • Footer
      • Hr
      • Icon
      • Iframe
      • Img
      • Ins
      • Input
      • Header
      • Heading
      • Kbd
      • Label
      • Legend
      • Link
      • Lists
      • Main
      • Mark
      • Map
      • Meter
      • Nav
      • Noscript
      • Object
      • Option
      • Optgroup
      • Output
      • Paragraph
      • Param
      • Picture
      • Pg
      • Plain
      • Pre
      • Progress
      • S
      • Samp
      • Section
      • Select
      • Small
      • Span
      • Sup
      • Sub
      • Strong
      • Table
      • Template
      • Textarea
      • U
      • Unescaped
      • Q
      • Rails View
      • Rp
      • Rt
      • Ruby
      • Var
      • Video
      • Wbr
      • Youtube
    • Reactive Core Components
      • Action
      • Async
      • Cable
      • Collection
      • Form
      • Form Input
      • Form Checkbox
      • Form Radio
      • Form Select
      • Form Submit
      • Form Textarea
      • Onclick
      • Transition
      • Toggle
  • Integrations
    • Action Cable
    • Devise
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Community
    • Discord
    • Contribute
  • About
    • Core Team [WIP]
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Components API
  2. Reactive Core Components

Cable

PreviousAsyncNextCollection

Last updated 3 years ago

Was this helpful?

The cable component enables us to update the DOM based on events and data pushed via ActionCable without a browser reload.

Please read the if you need help setting up ActionCable for your project, and make sure you have set up ActionCable correctly. The following code snippet is crucial to make the cable component work correctly:

app/javascript/channels/matestack_ui_core_channel.js

consumer.subscriptions.create("MatestackUiCoreChannel", {
  //...
  received(data) {
    MatestackUiCore.matestackEventHub.$emit(data.event, data)
  }
});

cable(*args, &block)

Returns a Vue.js driven cable component initially containing content specified by a block.

Imagine something like this:

class Page < Matestack::Ui::Page

  def response
    cable id: 'foo' [...] do
      # this block will be rendered as initial content and may be
      # modified on the client side later upon receiving defined events
      DummyModel.all.each do |instance|
        list_component item: instance
      end
    end
  end
end

where the list_component is registered like this:

class ListComponent < Matestack::Ui::Component

  requires :item

  def response
    # make sure to define an unique ID on the root element of your component
    # the declared ID may be used later on to update or delete this component on the client side
    div id: "item-#{item.id}", class: "row" do
      #...
    end
  end

end

Please note: When rendering a list of items, we recommend to use a custom component for each item. This makes it easy to render unique items on the serverside and push them via ActionCable to the client. Technically, it is also possible to use another component or a simple html string. Any given html will be used to update the item.

Required options

  • id - Expects an unique string that identifies the component

Optional options

  • append_on - Expects a string that matches the event which will be emitted via ActionCable on the serverside. Event payload data in form of HTML will be appended to the current cable component DOM.

In your app, page or component:

cable id: 'foo', append_on: "model_created" do
  DummyModel.all.each do |instance|
    list_component item: instance
  end
end

In your controller:

ActionCable.server.broadcast("matestack_ui_core", {
  event: "model_created",
  data: matestack_component(:list_component, item: @new_model_instance)
})

data can also be an array of components.

  • prepend_on - Expects a string that matches the event which will be emitted via ActionCable on the serverside. Event payload data in form of HTML will be prepended to the current cable component DOM.

In your app, page or component:

cable id: 'foo', prepend_on: "model_created" do
  DummyModel.all.each do |instance|
    list_component item: instance
  end
end

In your controller:

ActionCable.server.broadcast("matestack_ui_core", {
  event: "model_created",
  data: matestack_component(:list_component, item: @new_model_instance)
})

data can also be an array of components.

  • replace_on - Expects a string that matches the event which will be emitted via ActionCable on the serverside. Event payload data in form of HTML will replace the whole current cable component DOM.

In your app, page or component:

cable id: 'foo', replace_on: "model_created" do
  DummyModel.all.each do |instance|
    list_component item: instance
  end
end

In your controller:

ActionCable.server.broadcast("matestack_ui_core", {
  event: "model_created",
  data: matestack_component(:list_component, item: @new_model_instance)
})

data can also be an array of components.

  • update_on - Expects a string that matches the event which will be emitted via ActionCable on the serverside. Event payload data in form of HTML will update a specific element iditified by its root ID within the current cable component DOM.

In your app, page or component:

cable id: 'foo', append_on: "model_created" do
  DummyModel.all.each do |instance|
    list_component item: instance
  end
end

In your controller:

ActionCable.server.broadcast("matestack_ui_core", {
  event: "model_created",
  data: matestack_component(:list_component, item: @new_model_instance)
})

data can also be an array of components.

  • delete_on - Expects a string that matches the event which will be emitted via ActionCable on the serverside. Event payload data in form of a string containing the ID will remove a specific element identified by its root ID within the current cable component DOM.

In your app, page or component:

cable id: 'foo', delete_on: "model_deleted" do
  DummyModel.all.each do |instance|
    list_component item: instance
  end
end

In your controller:

ActionCable.server.broadcast("matestack_ui_core", {
  event: "model_deleted",
  data: "item-#{params[:id]}"
})

data can also be an Array of ID-strings.

html attributes - all the canonical can be set via options and will be added to the surrounding cable div.

ActionCable Guide
HTML global attributes