文章/答案/技术大牛

发布

问Rails、HAML和JQuery
EN

Stack Overflow用户

提问于 2013-03-18 00:49:03

回答 1查看 583关注 0票数 1

刚刚开始在Rails/HAML服务器上工作，该服务器在前端使用Bootstrap和JQuery。所有页面都是在服务器端生成的，然后我们使用JQuery在用户执行操作时给人一种Web2.0的感觉。

在我们从服务器获取数据的AJAX调用之后，我们在javascript中生成了一些复杂的html。也就是说，在我们有一个表的情况下，用户可以在表的行上执行操作。一种这样的操作是从表中删除一行，然后拉入另一行。在拉入另一行的情况下，我们从服务器获取JSON数据，在AJAX成功的情况下，我们使用JSON数据生成新行(HTML)并将其动画显示到表中。

我的问题是，表行相当复杂，并且在两个地方生成:服务器(HAML)和javascript。这意味着每次我想稍微改变一下表格(添加一个css类或改变一行的外观)时，我需要在两个地方修改代码，服务器和客户端。

这是一个遗留的系统，我被我所拥有的框架所困(也许能够说服人们引入另一个)。我能做些什么来解决这个问题呢？

我认为最好的方法是让服务器始终生成HTML。例如，当我需要添加新行时，不是返回JSON数据，而是返回新行的HTML。这样，我就可以使用相同的HAML文件服务器端来生成初始行和任何新行。

这对我来说都是很新的，这是最好的/唯一的方法吗？

提前谢谢。

jquery

ruby-on-rails

haml

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-25 20:39:42

我发现的最好的方法是在服务器端生成haml部分并返回。

haml :some_partial, :layout => false

然后在jquery成功中：

function(data) {
  html = $(data);
  ...
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15468156

复制

HTML代码简写法：Emmet和Haml

其他

HTML代码写起来很费事，因为它的标签多。一种解决方法是采用模板，在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。常用的简写法，目前主要是Emmet和Haml

ruanyf

2018/04/13

1.5K0

Rails MVC 和 CRUD(12)

edit model title 基础

保存成功就直接显示，如果保存失败，就重绘 new 页面，new 页面中加入了对错误信息的显示

franket

2021/11/25

2660

Rails MVC 和 CRUD(3)

ruby on rails

要在 Rails 中显示“My first test” 的静态页面，需要新建一个控制器和视图

franket

2021/11/24

7420

Rails MVC 和 CRUD(5)

html

创建了一个叫 ArticlesController 的类，继承自 ApplicationController

franket

2021/11/24

3530

Rails MVC 和 CRUD(7)

http

(这里的 /articles 明明对应两个方法，GET、POST ，有点不太明白，为什么这样指定就一定成了POST请求)

franket

2021/11/24

2030

Rails MVC 和 CRUD(9)

数据

保存数据修改 create 方法，对提交的数据进行保存 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new end def create # render plain: params

franket

2021/11/25

1980

Rails MVC 和 CRUD(15)

ruby html ruby on rails grep 数据库

点击【Destroy】后会根据我们的定义弹出提示连续删除几次后所剩无几目前已经通过 Rails 实现了文章的新建、显示、列出、更新、删除操作 ---- 命令汇总 rails server -b 0.0.0.0 rails generate controller welcome index cat app/views/welcome/index.html.erb vim config/routes.rb grep -v " #" config/routes.rb | grep -v

franket

2021/11/25

3650

Rails MVC 和 CRUD(2)

mvc 编程算法数据库 sql

MVC 分块设计有助于管理复杂的应用程序，因为可以在一段时间内只用关注一个方面；例如，可以在不依赖业务逻辑的情况下专注于视图设计；同时也让应用程序的测试更加容易；MVC 分层同时也简化了分组开发；不同的开发人员可同时开发视图、控制器逻辑和业务逻辑

franket

2021/11/24

3820

Rails MVC 和 CRUD(13)

edit

定义 update 方法，并且添加 edit 链接和 show 链接 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new @article = Article.new end def

franket

2021/11/25

1820

Rails MVC 和 CRUD(8)

数据库数据结构迁移 model 继承

再次提交一回 ---- 创建模型 Rails 提供了一个生成器用来创建模型 [root@h202 blog]# bin/rails generate model Article title:string text:text Running via Spring preloader in process 13216 invoke active_record create db/migrate/20160422140912_create_articles.rb c

franket

2021/11/25

2840

Rails MVC 和 CRUD(1)

ruby on rails mvc ruby

franket

2021/11/24

3570

Rails MVC 和 CRUD(10)

再次加载可以成功显示了 ---- 列出所有文章 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new end def create # render plain: params[:ar

franket

2021/11/25

1920

Rails MVC 和 CRUD(6)

api action form 表单源码

不过，通过查看源码，我们可以看到 action 部分指向的是当前页面 action="/articles/new" ，而这个页面 (Restfull API) 应该是用来进行显示的，而不是进行处理的

franket

2021/11/24

2800

html5如何设置自动对焦,如何HTML5自动对焦添加到轨道的形式？

http ide html html5 编程算法

html5如何设置自动对焦,如何HTML5自动对焦添加到轨道的形式？

Java架构师必看

2021/09/01

9740

Rails MVC 和 CRUD(11)

back

列表页面多出来两个链接，点击【New article】成功跳转到了添加页面，随便输入点什么，提交自动跳转到了显示页面，点击【Back】跳转回了所有列表页面 Tip: 之所以每做一次修改都能直接生效，是因为在开发模式下（默认），每次请求 Rails 都会自动重新加载程序，因此修改之后无需重启服务器 ---- 数据验证我们常常有对输入进行校验的需求，以避免接受到了无效或不合规范的数据 [root@h202 blog]# vim app/models/article.rb [root@h

franket

2021/11/25

2930

Rails MVC 和 CRUD(14)

删除文章在 controllers 中定义 destory 方法然后在 index 视图中加入 Destroy 链接 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new @article

franket

2021/11/25

2280

Rails MVC 和 CRUD(4)

api action route 日志

结果展示了当前的一系列 Restfull API 与 Controller#Action 的对应关系

franket

2021/11/24

4220

Rails布局和视图渲染

渲染 http ruby on rails html json

基于“多约定，少配置”原则，在 index 动作末尾并没有指定要渲染的视图，Rails会自动在控制器的视图文件夹中寻找 action_name.html.erb 模板，然后渲染。这里渲染的就是 app/views/books/index.html.erb

用户1515472

2019/07/24

3.5K0

ELK之本地Grok Debugger配置

ruby yum gcc https

1、Ruby环境安装清理已安装过的 #yum erase ruby ruby-libs ruby-mode ruby-rdoc ruby-irb ruby-ri ruby-docs #yum remove ruby 1.Ruby的安装 #yum install -y wget unzip #cd /usr/local #yum -y install openssl-devel gcc #wget https://ruby.taobao.org/mirrors/ruby/2.1/ruby-2.1.7.t

試毅-思伟

2018/09/06

8450

前端插件以及部分细分网址梳理

http jquery https 网络安全 react

图来源网络前端插件以及部分细分网址梳理插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程

企鹅号小编

2018/02/05

5.7K0

相似问题

带有Rails和Haml的Jquery和CoffeeScript scrollTo

混合使用jquery、rails和haml的问题

Rails Javascript/jQuery到Haml

Rails部分参数和HAML

haml和Rails RailsGuides入门

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问Rails、HAML和JQuery
EN