使用Cable进行pub:

ActionCable.server.broadcast "call", {address: AddressesController.render(@address)}

其中:AddressesController.render,是一个类方法,用于渲染view/addresses/_addresses.html.erb模版,并传入一个实例变量address。

# view/addresses/_addresses.html.erb
<td><%= address.name %></td>
<td><%= address.count %></td>

然后App收到数据,把数据添加到DOM上。

App.calladdress = App.cable.subscriptions.create "CalladdressChannel",
received: (data) ->
console.log(data)
para = document.createElement('tr')
para.innerHTML = data.address
if document.getElementById("add") != null
document.getElementById("add").appendChild(para)
else
console.log("null")

分析:

1. 注意data是一个hash对象。我们要用data.address提取出字符串格式的元素DOM.

2. 创建一个<tr>, 然后把字符串数据存入。

3. 附加到#add元素内。

render(*args)

Render templates with any options from ActionController::Base#render_to_string.

render_to_string(*args)

渲染一个模版,返回一个string格式。

例子,可以使用任何参数:

FooController.render :action, locals: { ... }, assigns: { ... }

用ActionController::Renderer的render方法渲染模版的更多相关文章

  1. 010 vue使用render方法渲染组件

    1.普通的组件渲染方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. render方法渲染组件和在webpack中导入vue

    使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...

  3. 实例的render方法渲染组件

    1.普通渲染组件 在app容器中插入login组件 <login></login>  一个app可以多个这种组件 <script> var login = { te ...

  4. 19 使用Vue实例的render方法渲染组件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Django——2 路由分配设置 re_path正则匹配 include总路由 url传参 name使用 模板渲染render方法 模板渲染方法

    Django 路由分配设置 re_path正则匹配 include总路由设置 url额外参数的传递 name的使用 模板的渲染:render方法   路由的分配中, 可以设定相应的转换器加以约束,比如 ...

  6. render 函数渲染表格的当前数据列使用

    columns7: [ { title: '编号', align: 'center', width: 90, key: 'No', render: (h, params) => { return ...

  7. React.js 小书 Lesson7 - 组件的 render 方法

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson7 转载请注明出处,保留原文链接和作者信息. React.js 中一切皆组件,用 React. ...

  8. Flask06 地址约定、利用falsk提供的方法渲染模板

    1 访问地址约定 在访问路径的末尾是否需要加 / -> 可以加,也可以不加 前端的访问路径必须和后端的路径完全匹配才能够访问成功,如果我们在后台的路径都是以 / 结尾,但是我们的访问路径是没有以 ...

  9. 组件的 render 方法

    React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件.我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component(还有别的 ...

随机推荐

  1. 建立TCP连接过程

    1.服务器实例化一个ServerSocket 对象, 表示通过服务器上的端口通信. ServerSocket serverSocket = new ServerSocket(port); 2.服务器调 ...

  2. ODAC(V9.5.15) 学习笔记(十一)TOraEncryptor、TOraPackage和TOraAlerter

    TOraEncryptor 名称 类型 说明 DataHeader TCREncDataHeader 一些附加信息放入加密数据中,包括: ehNone 无附加信息 ehTag   GUID和随机生成的 ...

  3. Delphi XE5 for Android (十)

    我觉得Delphi最强大的的功能之一就是开发数据库三层应用的DataSnap,在Android上的实现,首先是完成服务器的设计: (1)利用向导完成DataSnap服务器的框架,如下图: 由于是实验, ...

  4. 一些常用的mysql语句实例-以后照写

    create database blog; create table blog_user ( user_Name char(15) not null check(user_Name !=''), us ...

  5. SpringBoot 整合携程Apollo配置管理中心

    携程官网对apollo的使用讲解了很多种方式的使用,但是感觉一些细节还是没讲全,特别是eureka配置中心地址的配置 这里对springboot整合apollo说一下 >SpringBoot启动 ...

  6. Python, pandas: how to sort dataframe by index// Merge two dataframes by index

    pd.concat([df1, df2], axis=1) df.sort_index(inplace=True) https://stackoverflow.com/questions/404680 ...

  7. HDU 6318 Swaps and Inversions(归并排序 || 树状数组)题解

    题意:一个逆序对罚钱x元,现在给你交换的机会,每交换任意相邻两个数花钱y,问你最少付多少钱 思路:最近在补之前还没过的题,发现了这道多校的题.显然,交换相邻两个数逆序对必然会变化+1或者-1,那我们肯 ...

  8. 【做题】apc001_f-XOR Tree——巧妙转化及dp

    对树上的路径进行操作是十分难处理的事情.一开始的思路主要针对于\(a_i<=15\)这一特殊性质上.于是考虑了\(a_i<=1\)的情况,然而除了糊出一个适用范围极小的结论外,并没有什么用 ...

  9. 一个涉及到浮点寄存器的CM

    这次找小伙伴要了他的一个CM,怎么说呢,这CM让我学到了不少,其实搞出来后感觉不难,就是有不少FPU浮点相关的指令和FPU寄存器完全没学过,查了不少资料,学到了很多 打开是这样 无壳程序,我们直接od ...

  10. LuoguP3674 小清新人渣的本愿 && BZOJ4810: [Ynoi2017]由乃的玉米田

    题目地址 小清新人渣的本愿 [Ynoi2017]由乃的玉米田 所以这两题也就输出不一样而已 题解 这种lxl的题还是没修改操作的题基本就是莫队 分开考虑每个询问 1.减法 \(a-b=x⇒a=b+x\ ...