Rails中的JSTree碎片問題

Question

我試圖在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();

Answer 1

沒關系。 不好意思 在研究Chrome調試器時，我發現依賴項之間發生CSS沖突。

我的一個依賴項定義了這種樣式。 一旦禁用了margin-bottom屬性，問題就消失了。

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