Question

我正在为一个网站开发一个Javascript密集的片段（使用jQuery）（目前，我正在努力开发原型）。

总结我正在做的事情，我有一系列'图标'。目前，每个图标都是一个图像。我也有一系列'桶'。图标全部从一个桶开始。用户可以创建新桶并将桶中的图标拖动到桶中。也可以通过点击它们来打开和关闭图标（尽管它们仍然保留在它们的桶中）。

我现在一切正常，但是目前它基本上是一堆img元素从div移动到div。当我准备开始实现服务器端逻辑时，我将需要一种方法来传达正在发生的事情。

我需要的是一个'模型'对象，反映视图的内容。如果当用户准备好将数据发送回服务器时，我会有一个可以序列化的对象代表我需要的东西。例如，如果用户已将email.png图标拖入存储选项桶中，我希望将其反映在模型对象中（即{'options'：['email']}）。

问题是，我的所有逻辑都是基于事件发生的。当用户将图标拖动到div时，会在img DOM元素上触发一个事件，我不知道如何访问它的模型来更新它。我唯一能想到的是解析img src并使用它来找出模型选项的名称，但这是一个非常hackish和不优雅的解决方案。

有什么想法吗？

Answer 1

您可以通过将根对象附加到DOM中的某个对象来维护对象的原始对象模型或图形，或者使用jQuery data system将其保留在其中。

甚至将UI DOM元素引用到此集中模型中，以帮助降低两个不同模型的复杂性。

jQuery plugins以jQuery数据系统内部的方式集中状态并不罕见。

原始JavaScript

document['myObjectGraph'] = {
    first: 1,
    second: 'two,
    images: [
        document.getElementById('img1'),
        document.getElementById('img2')
    ],
    items: [
        'a',
        'b',
        another = { /* building out the model...*/ };
    ] 
};

或jQuery数据系统（相同的想法）

jQuery.data(document.body, 'myObjectGraph', {
    first: 1,
    second: 'two,
    images: [
        $('#img1'),
        $('#img2')
    ],
    items: [
        'a',
        'b',
        another = { /* building out the model...*/ };
    ]         
});

实际上，这会在一个地方（您选择设计）创建一个可管理的模型 - 它代表您的图标，水桶和其他任何东西的状态;它可以使用JSON序列化，并通过ajax调用发送到服务器;甚至可以从中重建/刷新您的UI元素。

这个想法伴随着额外的间接成本以及保持原始模型与UI模型同步的努力。

Answer 2

您可以使用元素的id或class属性来存储模型的名称吗？然后，您可以为每个字符串指定所需的字符串，而不是尝试取消src属性。

Answer 3

您可以将图标留在存储桶中，然后在需要与服务器通信时询问存储桶中的内容。只要图标具有一些独特的属性（例如id）来识别它们，您就可以根据需要动态构建模型。这样的东西可以用来序列化你的桶：

http://jsfiddle.net/ambiguous/3ufhn/

只要事情保持简单，这将很有效。如果事情变得更复杂，那么明确的MVC设置会使事情变得更容易，John K的{{1}}方法会派上用场;您还可以使用隐藏输入的.data来跟踪您的状态。

问题结构化JavaScript（视图和模型逻辑的分离）

3 个答案: