今天神贴再次热议 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 的心,无奈我找不到关于上面两个问题很好的处理方法,也找不到对应的开源项目。
昨天看到人说:“完全使用后端 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 在前端渲染模板,这个就见人见智了。
# 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 真的太恶心了。
#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 这块进去,可是里面涉及了@reply
和topic
, 而且 session create 里没有topic id
,而一般有 reply form 的就是在topics/:id
url 里。
如果还涉及一种情况,就是这个 form 还出现在这样的 url 里topics/:topic_id/replies
这样又会更复杂一些,所以涉及这种情况的 ujs,该如何涉及更好?