瞎扯淡 神马是 SJR?

QueXuQ · 2013年12月11日 · 最后由 QueXuQ 回复于 2013年12月17日 · 4341 次阅读

今天神贴再次热议 SJR 与 Javascript MVC,我有几个疑问。 我也想过这两个问题,因为我个人觉得 UJS 很神奇,因为竟然可以用后端思维写 js,我也尝试过想着不用 Javascript MVC 做一个大规模异步的项目,但是问题就来了: 1.关于 SJR 的信息比较少,所以我一直不太清楚究竟该怎么用,例如说:直接用 Turbolinks 和 UJS 就可以了?怎么避免内存泄漏呢? 2.UJS 的用法,关键就是remote: true,然后把 link_to,button_to,form_for 走个 UJS,来个js.erb,可是别的情况走异步我该怎么走?例如 change(),滚动条滚动,或者 mouse_out 等等,要处理这些事件,我所知道的就是还是走 ajax,所以 js 代码会变得到处都是,如果想着方便,可能还随时在一个页面来一个coffee:这样寻找 js 代码非常麻烦,而我更希望都是在js.erb里,但是办不成!!

我一直有一颗想走 SJR 的心,无奈我找不到关于上面两个问题很好的处理方法,也找不到对应的开源项目。

2. ajax 类型写 script

  1. 怎么引起内存泄露呢?求指导

#3 楼 @Rei 看来

  • 使用 CoffeeScript
  • 不玩定时器
  • 不在 document 和 window 绑事件

就不用担心内存泄露了,新技能 Get √ 谢谢

#5 楼 @Victor 这只是我部分了解到的,更多要看 4 楼。

#1 楼 @Rei 就是全走 ajax?不使用 UJS 了?

昨天看到人说:“完全使用后端 JS 或者完全使用前端 JS 都是找麻烦”,我深以为然。

楼主的思路是把 JS 的内容全弄到 UJS 里面去,这样可能让楼主感觉更干净(也就是不会到处都有 JS)。 但是我工作中是让前端 JS 和 UJS 互相配合的,怎么好使怎么写。

比如弹窗的时候,用前端 JS 去 AJEX 请求弹窗,再用 UJS 去处理弹窗内部的事件,比如弹窗内容是表单,表单内有日历,那么弹窗内的日历的 JS 写在 JS.erb 内,弹窗内部的 html 代码使用 j render 渲染。

# asset/pop.js
$("#create").on("click", function(){
  # do something that 'remote => true' can't do
  $.get("/blogs/new");
});

# new.js.erb
$('#popout').html("<%= j render("pop_form") %>");

我感觉这样非常顺手。因为在不用 JS MVC 的情况下,要是使用前端 AJEX,前端接受 json 渲染 html 的话,就要在 js 内拼 html 了。

var html = "<div>" + json.content + "</div>"

当然另外一个方案自然是使用 js mvc 在前端渲染模板,这个就见人见智了。

#7 楼 @QueXuQ SJR 就是 ajax 的时候把 dataType 设为 'script',UJS 不能覆盖的地方自然是 js 啊。

#8 楼 @bydmm Cool,这个写法很赞。

# asset/pop.js
$("#create").on("click", function(){
  # do something that 'remote => true' can't do
  $.get("/blogs/new");
});

# new.js.erb
$('#popout').html("<%= j render("pop_form") %>");

这样说法,我就可以在使用change等等事件都使用这个方法了,如:

$("input").change(function(){
  $.get("/blogs");
})

#index.js.erb
...

这样是可行的吧? 用 js 拼 html 真的太恶心了。

#8 楼 @bydmm #9 楼 @Rei j render有时候有深深的坑,如果render进来的那个模板,里面带着大量的变量@a,@b,@c,那我就必须在每个会render到这个模板的 js.erb 的 action 里重新定义一遍。 而如果其中一个@a = A.find(params[:id])而 js.erb 的 action 中又没有a的id这时候怎么弄?通过 url 值传过去?

#11 楼 @QueXuQ 你这个例子写的太泛,请具体说明。 另外我隐隐的感觉问题出在后台的程序设计上。

#11 楼 @QueXuQ 这是局部模板设计的问题。不是 j render 就能随意用实例变量了?

#12 楼 @bydmm 这个问题我也想过是设计的问题上,但是没有想到有更好的方案。例如我的是用 modal 来实现登录的 ujs,所以这个 modal 在 layout 上,本来问题不大的。可是还涉及,一个类似 ruby china 的回复功能,就是登录后可复回,而 form 上就涉及一个topic id:

= form_for @reply, url: topic_replies_path(@topic) do |f|
  = f.text_area :content
  ...

所以登录成功后,我得 j render 这块进去,可是里面涉及了@replytopic, 而且 session create 里没有topic id,而一般有 reply form 的就是在topics/:idurl 里。

如果还涉及一种情况,就是这个 form 还出现在这样的 url 里topics/:topic_id/replies这样又会更复杂一些,所以涉及这种情况的 ujs,该如何涉及更好?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号