如何在使用Javascript和ERB模板(Rails)时保持DRY

我正在构建一个Rails应用程序,它使用Pusher来使用Web套接字将更新直接推送到客户端.在javascript中:

channel.bind('tweet-create', function(tweet){ //when a tweet is created, execute the following code:
  $('#timeline').append("<div class='tweet'><div class='tweeter'>"+tweet.username+"</div>"+tweet.status+"</div>");
});

这是令人讨厌的代码和演示混合.因此,自然的解决方案是使用javascript模板.也许生态或胡子:

//store this somewhere convenient, perhaps in the view folder:
tweet_view = "<div class='tweet'><div class='tweeter'>{{tweet.username}}</div>{{tweet.status}}</div>"

channel.bind('tweet-create', function(tweet){ //when a tweet is created, execute the following code:
    $('#timeline').append(Mustache.to_html(tweet_view, tweet)); //much cleaner
});

这很好,除了我重复自己.小胡子模板与我已编写的用于从服务器呈现HTML的ERB模板99%相同.胡子和ERB模板的预期输出/目的是100%相同:将tweet对象转换为tweet html.

消除这种重复的最佳方法是什么?

更新:尽管我回答了自己的问题,但我真的希望看到其他人的其他想法/解决方案 – 因此是赏金!

最佳答案
imo最简单的方法是在创建新推文时使用AJAX更新页面.这需要创建两个文件,第一个是标准的html.erb文件,第二个是js.erb文件. html.erb将是标准表单,可以在从数据库中提取之后迭代并显示所有推文. js.erb文件将是您在创建时附加新推文的简单javascript,即:

$('#timeline').append("<div class='tweet'><div class='tweeter'><%= tweet.username %></div><%= tweet.status %></div>")

在您的新推文表单中,您需要添加:

:remote => true

这将启用AJAX.然后在创建操作中,您需要添加如下代码:

def create
...Processing logic...
  respond_to do |format|
    format.html { redirect_to tweets_path }
    format.js
  end
end

在这种情况下,如果你发布一个启用了AJAX形式的推文,它将通过运行create.js.erb中的任何代码来响应调用(这将是$(‘#timeline’).从上面附加代码) .否则它将重定向到您想要发送它的任何地方(在这种情况下,推文的“索引”).这是实现你想要做的最干净,最清晰的方式.

转载注明原文:如何在使用Javascript和ERB模板(Rails)时保持DRY - 代码日志