显示和操作树结构

Question

我正在建立一个网站，用户可以以分层方式存储一些数据。

今天我一直在创建构成树中对象的类。

但是，我对JavaScript / CoffeeScript和客户端脚本相当陌生，我不确定如何正确设计。

以这个代表叶子节点的类为例：

class window.LeafNode
  constructor: (@title, @desc, @content) ->

  doesMatch: (query) ->
    (@title.toLowerCase().indexOf query) > -1

  html: ->
    element = document.createElement('li')
    element.innerHTML = @title
    element

我在这里给这个班负责几件事。一个是创造它自己的状态，这似乎是合理的。但是，它还负责搜索自身并确定匹配，因此树结构是可搜索的。最后，它包含一个自己的html表示。

虽然我不确定搜索方法，但我反对在模型中使用html。我不认为它属于那里。

您能否就如何解决这个问题提供一些观点？

请注意，树应该是可搜索的，可序列化的，并且用户应该能够添加，删除和移动节点。

注意：我已经尝试过使用AngularJS，但是我决定反对它，因为它包含了大量的抽象，对于像我这样的新手来说，这些抽象是非常令人难以接受的。因此，我希望不需要使用框架或第三方库的建议。