javascript - ツリー構造の表示と操作

Question

ユーザーがデータを階層的に保存できる Web サイトを構築しています。

今日は、ツリー内のオブジェクトを構成するクラスを作成しています。

しかし、私は 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

ここでは、このクラスにいくつかの責任を負わせています。1 つは、合理的に思われる独自の状態を作成することです。ただし、それ自体を検索して一致を判断する役割も担っているため、ツリー構造は検索可能です。最後に、それ自体の html 表現が含まれています。

検索方法についてはよくわかりませんが、モデルに html を含めることには反対です。私はそれがそこに属しているとは思わない。

これを解決する方法について、いくつかの見通しを提供できますか?

ツリーは検索可能でシリアライズ可能である必要があり、ユーザーはノードを追加、削除、および移動できる必要があります。

注: 私は AngularJS を試してみましたが、JavaScript に慣れていない私のような人にとっては圧倒的な抽象化が大量に含まれているため、使用しないことにしました。したがって、フレームワークやサードパーティのライブラリを使用する必要のないアドバイスをお願いします。