Question

我不是在寻找特定的代码，而是寻找处理以下情况的整体方法：用户可以通过点击和拖动创建一个新的div包装文本（让我们称之为文本节点）。我想以某种方式保存用户修改的DOM的状态。

检查我的JSBin sample以确切了解我的意思。

代码是从我的Ember项目中提取的，但这就是它的作用：

点击修改区域只是一个Ember视图
当您将其拖动到工作区时，克隆单击以编辑并且所有Ember绑定都将丢失（这完全没问题）

因此，在用户将一个或多个文本节点添加到工作区后，我最终得到如下内容：

<div class="workspace">
  <div class="text" style="top: 86px; left: 141px;">Text Node 1</div>
  <div class="text" style="top: 99px; left: 100px;">Text Node 2</div>
  <div class="text" style="top: 10px; left: 44px;">Text Node 3</div>
</div>

tl; dr（已经到了** cking问题）

我如何保存这些信息，以便我可以忠实地在另一个页面上重新创建用户更改？

一些想法

在路由更改时，使用.text类遍历每个DOM元素并创建一个存储DOM文本和样式属性的对象？然后我必须创建一个'build'类型函数，它循环遍历对象并在给定页面上重新创建那些DOM元素。
在路由更改时，遍历每个DOM元素并将每个元素作为jQuery对象保存到数组中。 “重建”只是循环数组中每个项目并附加到DOM的问题。

结束，你怎么看？想法，批评＆amp;过去的经历非常受欢迎。

Answer 1

通过DOM循环来提取状态对于尝试解决问题很有用，但是一旦你开始拥有多种类型的对象，可选属性等就会变得混乱。

你所拥有的本质上是一个包含不同类型对象的Canvas。根据其属性，每个对象都显示不同的UI。

Canvas上的对象是具有某种多态性的形状。例如： - 矩形＆gt;形状，注意＆gt;形状等

Shape是一个基本数据结构，用于保存形状的公共数据，如x，y坐标，尺寸等。

像Note这样的子类将具有label属性，用于存储该注释的文本。类似地，其他形状将存储他们需要的其他数据。

每个Shape都需要提供一些方法来将数据序列化和反序列化为JSON。例如，如果我执行shape = new Note(); shape.deserialize({ ... })，它将使用来自json的数据填充形状。

另一方面，如果我shape.serialize()，它将返回形状数据的JSON表示。例如： - {x：10，y：10，标签：'test'，宽度：100，高度：100}。

现在您需要一个显示此形状的相应视图对象。每个形状都可以有一个ShapeView，将shape个对象作为数据，在DOM上呈现它。

然后使用CanvasView的{{1}}会给出一系列形状，使用它的视图显示形状，然后将其放在正确的位置。

所有这些都为您提供了一个存储画布状态的CollectionView模型。以及为该模型呈现状态的相应Canvas。所以在任何时候你都可以调用CanvasView，它会给你一些保持画布状态的json。您可以将其保存到服务器。

稍后使用canvasModel.serialize()将画布恢复到以前的状态。

这是一个简单编辑器的要点。这些东西是大多数游戏的基础。通常canvasModel.deserialize()非常聪明，在屏幕上绘制内容，进行滚动，动画等等。

Ember - 如何'保存'DOM状态

tl; dr（已经到了** cking问题）

1 个答案: