Question

我试图在Rails中构建一个文件浏览器，并且遇到了一个奇怪的问题，我的JStree有些碎片。（见下图）

enter image description here

我怀疑它与我的JavaScript文件中的这一行有关，但我并不完全确定。（完整的JS文件进一步下载）

'data' : <%= @folders.to_json.html_safe %>,

我怀疑这行代码的原因是因为在另一个项目中，我得到了正确构建的JSTree，但我在没有任何AJAX调用的情况下这样做。

但是，现在我正在使用JQuery进行AJAX调用，让服务器回复JavaScript以构建JSTree，我得到了这种奇怪的碎片。

有人能够解释为什么会这样吗？

myView.html.haml

%a.btn{id: 'open-test-data-directory'}
#treeViewDiv

的application.js

$(document).on('click', '#open-test-data-directory', function() {
  $.ajax({
  method: "GET",
  url: "/fire_ajax",
  dataType: "script"
})

的routes.rb

get '/fire_ajax', to: 'ajax#go'

ajax_controller.rb

def go
    @folders = directory_hash("/home/jeffrey/Documents/Ruby_Workspace/OLD_Learning Ruby On Rails - Working Files/Chapter 12/timetracker/tmp")

    respond_to do |format|
        format.js {render :my_jserb_file}
    end
end

my_jserb_file.js.erb

function buildMyJStree(){
return $("#treeViewDiv").jstree({ 
    'core' : {
        'data' : <%= @folders.to_json.html_safe %>,   // <----- Suspicious line!!!
        'themes' : {
            'name' : 'proton'
            }
        }
   });
}

buildMyJStree();

的更新

实际上，我不太确定我的怀疑线＆＃34;与此有关。我继续尝试手动创建JStree的数据，并在树中发生相同的视觉问题。请参阅以下代码::

function buildMyJStree(){
 $("#treeViewDiv").jstree({ 
    'core' : {
        // # 'data' : <%= @folders.to_json.html_safe %>,   // <----- Suspicious line!!!
        'data' : [
            {   'text' : 'Root 1',
                'children' : []
            },
            {
                'text' : 'Root 2',
                'children' : [
                    {'text' : 'Root 2 kid 1'},
                    {'text' : 'Root 2 kid 2'}
                ]
            },
            {
                'text' : 'Root 3',
                'children' : []
            }
        ],
        'themes' : {
            'name' : 'proton'
            }
        }
    });
}

buildMyJStree();

enter image description here

Answer 1

没关系。对不起大家。正在挖掘Chrome调试器并意识到我在依赖项之间发生了CSS冲突。

我的一个依赖项定义了这种样式。一旦我禁用了margin-bottom属性，问题就消失了。

.h-entry ul {
  margin-bottom: 20px;
  list-style: square;
  margin-left: 1.5em;
}

Rails中的JSTree碎片问题

的更新

1 个答案: