Item 表单页面的 Select2 相关业务逻辑

Select2  插件官网：https ://select2 .github .io /

Select2 初始化说明：

代码在 public/javascripts /subchannel_items .js  中的 $("#subchannel_item_showable_id ").select2  行。

select2 方法中的参数说明：

theme：指定 CSS 主题，Bootstrap 主题 Github 地址：https://github.com/select2/select2-bootstrap-theme

escapeMarkup：用来转义下拉列表中 HTML 代码的函数。这里重写，表示不转义。

language：设置提示文字。这里重写了搜索无结果(noResult)时的提示文字为一个链接，用来添加内容使用。

tempateResult：下拉列表中每一相的渲染模板，当是视频时，显示 video_id 和 show_id

ajax：发送一个 GET Ajax 请求，从数据库获取下拉列表内容

url：通过不同的 showable_type 确定

data：请求后端时传递的参数。

structure：后端返回 json 的格式要求

page：分页页数

q[xxxxxxxxxx]：ransack 使用的搜索参数

transport：select2 中 Ajax 请求处理逻辑，这里需要处理 Ajax 响应的 Header 中的 ‘X-Total-Count’ 和 ‘X-Per-Page’        用来后续进行分页逻辑处理

processResult：对 Ajax 中请求返回的 data，以及查询请求参数 params 进行处理，返回生成下拉类表需要的数据

Select2 的下拉列表实际就是请求了对应资源的 index action。如 VideosController 中的 index action，新创建了 index.json.jbuilder 和 _video.json.jbuilder view。其中 _video.json.jbuilder 中通过 params[:structure] 来确定返回的 json 格式。index action 使用 api_paginator 方法来设置分页相关的 Header。

当搜索的内容不存在，点击“添加一个”时的逻辑：

代码在 public/javascripts/subchannel_items.js 中的  $(document).on('click', '#add-subchannel-item-showable' 行。

当搜索的内容存在，选择时从媒资接口更新相关的明星或视频信息

代码在 public/javascripts/subchannel_items.js 中的  $("#subchannel_item_showable_id").on('select2:select' 行。