Rails 中的 JSTree 碎片问题答案

【问题标题】：JSTree fragmentation issue in RailsRails 中的 JSTree 碎片问题
【发布时间】：2015-03-17 21:22:32
【问题描述】：

我正在尝试在 Rails 中构建文件资源管理器，但遇到了一个奇怪的问题，即我的 JStree 存在某种碎片。（见下图）

我怀疑它与我的 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();

更新

实际上，我不太确定我的“可疑路线”与此有关。我继续尝试为 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();

【问题讨论】：

标签： jquery ruby-on-rails ajax jstree

【解决方案1】：

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

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

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

【讨论】：