现在，一个页面的精致与否，用户的体验舒服不舒服，绝大部分就体现在页面是否能像打开本地文件一样做到尽量少的加载整个页面，ajax的局部刷新可以帮助我们实现。今天主要讲一下，如何在页面还没刷新就让用户可以看到他刚刚新添的数据。
涉及到的文件有如下
index.html.haml _form.html.haml xxx.controller.rb以及最重要的create.js.coffee
首先是做到不打开新的页面完成创建数据，那么我们需要的效果是当我们点击新建的时候，出现一个弹窗，来让我们创建数据，index页面一般都有“新建”这个按钮，他本来一般是这样子的
link_to "新建", new_xxx_path 那么我们首先肯定是不用这个链接了，因为打开这个链接我们就会跳转到新页面，那这个按钮先改成 link_to "新建", "#", {class: btn-new}, 顺便给个class或者id以便我们等会能选到，这时候我们需要在准备一个空的div，用来加载我们的表单在你页面的底下加一个#new_XXX_dialog_div{align: "center"}名字什么无所谓，之所以叫dialog，是因为我们马上就要用到jquery ui 的dialog这个方法，这个方法的作用就是让你在一个弹窗里打开一个链接，这个方法这么写
$(".btn-new").click ->
url = '/xxx/new'
$("#new_xxx_dialog_div").load(url).dialog(title: '新建', width: 700, height: 450)
return false
如此一来当我们点击新建的时候会有这样一个效果
需要注意的是把你new方法的layout开关关了，render layout: nil
那光是这样还是不够，因为我们点击保存之后页面还是会重定向到index，从而导致刷新，那怎么解决呢，我们不用他本来的表单提交，打开你的表单页面在你的表单里加一条属性，
remote: true 用了这个之后就可以让你的create这个动作不必在定向到index，我们可以渲染一个js文件
我们现在要做的事情大体上是这个意思：用户点击保存之后，找到create这个动作，在save之后他本来会回到index，刷新了页面之后就能看到新加的数据了，现在不让这个动作回到index，那页面就不会刷新，可是如此一来用户也没法看到他刚刚加的数据，虽然数据已经存在了，那么重点来了，create.js.coffee这个文件里我们要写些什么才能让用户感觉页面没刷但是数据已经添好了呢，大体上为三个步骤
1.把弹窗关闭
2.在原本显示数据的地方插入一条html，内容就是你新建的数据，这条数据你可以说它是假的，但其实也是真的，因为数据的确在，但光是这样还不够以假乱真，因为如果你想查看，编辑，或者删除这条数据，那是做不到的，那这时候就需要第三步
3为这条加进来的数据绑定事件
第一步很简单 $("#new_xxx_dialog_div").dialog('close')
第二步 取决于你的内容，一般用after()方法或者html(),在你想要添进去的地方利用控制器里的变量使其‘混’在其他数据里面也看不出来
看到第一条数据了吗，是不是看不出来，不过这时候点那个删除就会暴露
第三步 我们用bind方法为这个删除按钮绑定事件，从而使这条‘假’数据能以假乱真
class最好有别于index页面的，不然会发生一个按钮触发两次事件的尴尬情况，这时候再点击删除，他也能像正常的数据一样可以被删除了。
网友评论