javascript - 从javascript渲染部分，传递类变量的问题

Question

我正在尝试设置一个无限滚动的 View 。我通过让 javascript 加载一个部分来做到这一点，但问题是我需要传入变量@row(参见下面的部分)来计算要加载的对象。

当通过下面的 js 插入部分时，@row 变量不会加载。

我是不是错误地解决了这个问题(有没有更简单的方法来插入 rails 对象)，或者有没有办法将 @row 变量从 js 传递到部分中。

Controller :

respond_to do |format|
  format.html
  format.js
end

从上面 Controller 响应加载的js:

$(' #{render "shared/browse_row" ).insertAfter( $('.row') );

查看:

-(1..6).each do
    = render "shared/browse_row"

部分浏览行:

.row{'data-row'=> "#{@row}"}
-@row += 1
%ul
    -@i = 0
    -project_row( @row ).each do |project|
        -@i += 1
        -@i == 4 ? right = "right" : right = ""
        %li{:class => right}
            = image_tag( project.display_pic.url(:medium) )
            .filler{'data-link' => '/projects/'+project.id.to_s }
                .filler-text
                    .p-name
                        = project.name
                        .p-creator= "by " + project.creator.name
                    .p-price= "$" + number_with_precision(project.price, :precision => 2).to_s
                    .p-days
                        - if days_left( project ) > 0
                            ="Expires in " + pluralize( days_left( project ), " Day")
                        - else
                            ="Expires Today"
                    .p-percent
                        - percent_funded(project).gsub("%","").to_i > 100 ? percent = "100%" : percent = percent_funded(project)
                        .p-percent-bar{:style => "width:#{ percent };"}

Answer 1

当您使用此语法渲染它时，您应该将 @row 实例变量传递给它:

render :partial => "shared/browse_row", :locals => { :row => @row }

然后它将作为名为 row 的变量在 browse_row 部分文件中可用

那么你只需将其更改为:

.row{'data-row'=> "#{row}"}

---

在未来，你可能想做更多这样的事情......

在加载更多项目的链接中:

<a href="path_to/more_projects" class="get-new-projects" data-remote="true" data-method="GET">Load more projects</a>

在你的 Controller 文件中:

def show
  row = params[:row]
  @projects = Project.where('id > ?', row)  

  render :json => { :projects => render_to_string( :partial => 'shared/browse_row.html',
                                                   :locals => { :row => row }) }, 
         :status => :ok
end

然后在你的 ajax 成功回调中:

$('.get-new-projects').live('ajax:success', function(data, json, response) {
  // insert the rendered HTML that we passed in as a JSON string
  $('.row').after(json.projects);
});

通过这种方式，您可以让一切井井有条。您的后端呈现代码，您的前端将呈现的代码放在页面上需要的位置……大家都很高兴。