[TASK] adjusted docs for cable component due to review feedback

Author: jonasjabari

docs/api/100-components/cable.md

@@ -2,13 +2,26 @@
 
 The `cable` component enables us to update the DOM based on events and data pushed via ActionCable without browser reload. Please read the [ActionCable Guide](/docs/guides/1000-action_cable/README.md) if you need help setting up ActionCable for your project.
 
+Please read the [ActionCable Guide](/docs/guides/1000-action_cable/README.md) if you need help setting up ActionCable for your project.
+
+Please make sure to setup ActionCable correctly. Esspecially following implementation is important in order to use the `cable` component correctly:
+
+`app/javascript/channels/matestack_ui_core_channel.js`
+
+```javascript
+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.
 
-When rendering a list of items, make sure to use a custom component for each item. This is mandatory in order to render unique items on the serverside and push them via ActionCable to the client.
-
 Imagine something like this:
 
 ```ruby
@@ -44,7 +57,7 @@ class ListComponent < Matestack::Ui::Component
 end
 ```
 
-
+Please notice: 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. But it is possible to also use another component or a html string. Any given html will be used to update the list.
 
 
 **Required options**
@@ -172,4 +185,4 @@ end
   `data` can also be an Array of ID-strings
 
 
-* Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding card div.
+* Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding card div.

docs/guides/750-cable/README.md

@@ -2,10 +2,25 @@
 
 The `cable` component is designed to asynchronously manipulate its DOM based on ActionCable events triggered on the serverside. Imagine a list of Todos and a `form` below that list. After creating a new Todo, the new list item can be rendered on the serverside and pushed to the `cable` component, which can be configured to pre or append the current list with the new item. Unlike the `async` component, the `cable` component does not request and rerender the whole list after receiving a specific event.
 
-Furthermore you can update or remove items in that list using ActionCable events as well. The `cable` component again will only manipulate the specific DOM elements and not the whole list. This requires more implementation effort but gives you more flexibility and performance while creating reactive UIs compared to the `async` component. As usual, no JavaScript is required at your end in order to implement this sophisticated reactivity.
+Furthermore you can update or remove items in that list using ActionCable events as well. The `cable` component again will only manipulate the specific DOM elements and not the whole list. This requires more implementation effort but gives you more flexibility and performance while creating reactive UIs compared to the `async` component. As usual, no JavaScript is required at your end in order to implement this sophisticated reactivity. (Only one time setup as shown below)
 
 Please read the [ActionCable Guide](/docs/guides/1000-action_cable/README.md) if you need help setting up ActionCable for your project.
 
+Please make sure to setup ActionCable correctly. Esspecially following implementation is important in order to use the `cable` component correctly:
+
+`app/javascript/channels/matestack_ui_core_channel.js`
+
+```javascript
+consumer.subscriptions.create("MatestackUiCoreChannel", {
+  //...
+  received(data) {
+    MatestackUiCore.matestackEventHub.$emit(data.event, data)
+  }
+});
+```
+
+ActionCable pushes data as JSON to the client. You need to make sure to pass this data correctly into the `matestackEventHub` after receiving ActionCable event.
+
 
 ## `cable` vs `async` component
 
@@ -256,6 +271,20 @@ cable id: "shopping-cart", replace_on: "shopping_cart_updated" do
 end
 ```
 
+### Event data as Array
+
+All above shown examples demonstrated how to push a single component or ID to the `cable` component. In all usecases it's also possble to provide an Array of components/ID-strings, e.g.:
+
+```ruby
+ActionCable.server.broadcast("matestack_ui_core", {
+  event: "todo_updated",
+  data: [
+    matestack_component(:todo_component, todo: @todo1),
+    matestack_component(:todo_component, todo: @todo2),
+  ]
+})
+```
+
 
 ## Complete documentation