王筝的博客
ruby学习
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’ 行。

http://jscolor.com/

http://jscolor.com/examples/

 

今天使用了js里的颜色选择器,后来发现在ruby代码里有个问题,在编辑页面需要重新刷新一次才能加载这个控件。

 

Turbolinks 中的事件列表:
https://github.com/turbolinks/turbolinks-classic/tree/v2.5.3#events

JSColor 不能生效的原因:
With Turbolinks pages will change without a full reload, so you can’t rely on DOMContentLoaded or jQuery.ready() to trigger your code. Instead Turbolinks fires events on document to provide hooks into the lifecycle of the page.

解决办法,就是将 JSColor 中初始化逻辑绑定到 Turbolinks 的 ‘page:change’ 时间上,而不是原生 window 的 ‘load’ 事件

 

app/assets/javascripts/jscolor.js

  register : function () { 
    // jsc.attachDOMReadyEvent(jsc.init);
    jsc.attachEvent(document, 'page:change', jsc.init);
    jsc.attachEvent(document, 'mousedown', jsc.onDocumentMouseDown);
    jsc.attachEvent(document, 'touchstart', jsc.onDocumentTouchStart);
    jsc.attachEvent(window, 'resize', jsc.onWindowResize);
  },

 

 

 

 

今天尝试做移动端自适应的页码,添加了zepto.min.js,写完对应的代码后重启服务,这时候发现zepto.min.js方法无法识别,

不能直接在application.js里调用。

原因是ruby on rails 的服务默认添加了jquery.js,占用了$符号,在application里使用$调用,默认就调用的jquery里的方法,

所以如果想在application.js里使用$符号以及使用zepto的方法,需要将对应的js代码外面加一层

(function($){
   //这里写一些zepto方法调用
}(Zepto))

 

$ bundle exec rake db:migrate
rake aborted!
Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes.

(See full trace by running task with –trace)

推荐下面的网址

https://github.com/joyent/node/wiki/installing-node.js-via-package-manager

$curl -sL https://rpm.nodesource.com/setup | bash –

$yum install -y nodejs

 

reload 方法,该方法强迫浏览器刷新当前页面。
语法:location.reload([bForceGet])
参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

96 @switch_state = (entity_class, entity_id, state_attribute_name) ->
97 $.ajax({
98 url: ‘<%= switch_state_commons_path %>’,
99 type: ‘put’,
100 data: {‘entity_class': entity_class, ‘entity_id': entity_id, ‘state_attribute_name': state_attribute_name}
101 }).done( ->
102 $().toastmessage(‘showSuccessToast’, ‘操作成功’);
103 location.reload();
104 )