Question

我正在尝试使用Sinatra + Haml + Jquery创建一个类似FAR管理器的Web应用程序。我可以在我的get控制器中收集数据并将其呈现为haml partial.I将此部分呈现为两个div。但是当我点击文件时，我的div在同一时刻更新，我在两个div中看到相同的信息，即。他们是同步的。我想让他们独立模仿FAR。这是我的代码：

app.rb

require 'sinatra'
require 'haml'


helpers do
  def file_root
    "D:/rubyStudy"
  end
end

get '/*' do |dir|
  @file_root = params[:root]

  path = '/' + dir.to_s.strip
  path << '/' unless path[-1, 1] == '/'

  @parent = File.dirname(path)

  @path = []
  paths = path.split('/')
  paths.each_with_index do |item, index|
    if index == paths.length-1
      @path[index] = item
    else
      @path[index] = "<a href=\"#{paths[0..index].join('/')}\">#{item}</a>" unless item.to_s.length == 0
    end
  end
  @path = path == '/' ? '[root]' : '<a href="/">[root]</a>' + @path.join('/')

  @directories = []
  @files = []

  Dir.foreach("#{file_root + path}") do |entry|
    full_path = file_root + path + '/' + entry
      if File.directory?(full_path)
        @directories << path + entry if entry != ".." && entry != "."
      else
        ext = File.extname(full_path)
        @files << entry
      end
  end
  haml :index
end

layout.haml

!!!
%html
  %head
    %title Simple File Browser
    %link{rel: "icon", type: "image/ico", href: "/favicon.ico"}
    %link{href: "/bootstrap/css/bootstrap.css", rel: "stylesheet"}
    %link{href: "/css/custom.css", rel: "stylesheet"}
    %script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js")
    %script(src="/js/custom.js")
  %body
    .container
      .row
        %div.page-header
          %h1 Simple File Browser App
        = yield
    = haml :footer

index.haml

.col-md-6
  %h1 Workspace#1
  #workspace1
    = haml :files
.col-md-6
  %h1 Workspace#2
  .workspace2
    = haml :files

files.haml

%ul.list-group
  %li.list-group-item
    %a{ href:"#{ @parent }" }..
  -@directories.each do |dir|
    %li.list-group-item
      %a{ href:"#{dir}" }= File.basename(dir)
  -@files.each do |file|
    %li.list-group-item
      = File.basename(file)

我也尝试使用AJAX来解决我的问题。我已将JSON响应添加到我的获取路径

  content_type :json
  { :directories => @directories, :files => @files }.to_json

custom.js

$.ajax({
    type: "GET",
    url: '/',
    data: { get_param: 'directories' },
    dataType: "json",
    success: function (data) {
        var obj = data.query.results.entry,
        ul = $("<ul class=\"list-group\">");
        for (var i = 0, l = obj.length; i < l; ++i) {
          ul.append("<li class=\"list-group-item\"><a href='" + obj[i].link.href + "'>" + obj[i].title.content + "</a></li>");
        }
        $("#workspace1").append(ul);
    }
});

但我几乎是新手，并没有产生任何影响。请帮助AJAX或为我的问题提出任何其他解决方案。

如何为同一个GET请求创建两个独立的div“响应”？

0 个答案: