javascript - 主干 : rendering tree data and updating on changes

Question

我从服务器获取某种树数据(仅用于示例):

[
    {
    nodeName: "top level 1",
    nodes: [
        {
        nodeName: "2nd level, item 1",
        nodes: [
            {
            nodeName: "3rd level, item 1"}
        ]}
    ]},
{
    nodeName: "top level 2",
    nodes: [
        {
        nodeName: "2nd level, item 3",
        nodes: [
            {
            nodeName: "3rd level, item 7"},
        {
            nodeName: "3rd level, item 8"},
        {
            nodeName: "3rd level, item 9"}
        ]}
    ]}
]​

为了渲染这个，我使用 Backbone.Marionette.CollectionView 和 Backbone.Marionette.CompositeView http://jsfiddle.net/AdWjU/179/ (以下derickbailey's article)。

但是我需要每 300 秒轮询一次服务器，它可以返回更改后的树:

[
    {
    nodeName: "top level 1",
    nodes: [
        {
        nodeName: "2nd level, item 1",
        nodes: [
            {
            nodeName: "3rd level, item 1"},
            {
            nodeName: "new name"} // changed
        ]}
    ]},
{
    nodeName: "top level 2",
    nodes: [
        {
        nodeName: "2nd level, item 3",
        nodes: [
            {
            nodeName: "3rd level, item 7"},
        {
            nodeName: "3rd level, item 8"},
        {
            nodeName: "3rd level, item 9"},
        {
            nodeName: "3rd level, item 10"} // added
        ]}
    ]}
]​

现在我只需调用 tree.update(data) 即可重新渲染整个数据。

如何仅更新依赖于已更改属性的 View ？

我正在尝试减少重新渲染的 View 。我应该使用 CompositeViews 还是尝试诸如 Backbone 关系模型之类的东西来完成此任务？

Answer 1

由于您每次初始化时都会重建集合，因此每当您调用 update 时，您都会从头开始删除并重新创建节点树。

为了保留您的节点树，您必须同步从主干服务器获取的树。最直接的方法是创建与 nodeName 一起传递的唯一 id，并以此为基础构建模型和集合。然后你可以重写这个:

if (nodes) {
  this.nodes = new TreeNodeCollection(nodes);
  this.unset("nodes");
}

进行查找以查看您的节点是否存在并将其附加到相关集合，而不是将其清除并重新创建。