Javascript 显示和操作树结构

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

今天，我创建了组成树中对象的类

然而，我对JavaScript/CoffeeScript和客户端脚本还相当陌生，我不知道如何正确设计

以表示leafnode的此类为例：

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，但决定不使用它，因为它包含了大量的抽象，对于像我这样的JavaScript新手来说，这些抽象非常强大。因此，我想要不需要使用框架或第三方库的建议。

doesMatch

对于简单的情况来说似乎足够公平，将

html

方法移动到单独的

LeafNodeView

类可能是个好主意。是的，我也在考虑类似的事情。但是如果我想要多个视图呢？例如，手机友好型版本。我想象某种分离，模型以某种方式发出更改，然后其他东西负责处理该更改和更新DOM。我希望模型独立于视图。如果您想要多个视图，那么就创建多个视图，这个名称只是说明性的；对于不同的环境，有各种各样的方法来管理不同的视图，而且这些技术实际上并不特定于JavaScript。听起来您将要重新创建一个框架，例如。我已经研究了主干JS，这在将来肯定会很有趣，但现在我想自己实现这些解决方案，熟悉JS并保持轻量级。主干源代码非常简单，可读性强，因此您可以研究一下它们是如何工作的。