javascript - 如何将 HTML5 Canvas 模型与 MVVM/MVP 数据框架链接起来

Question

在多次尝试理清我对此事的想法后，我认为最好求助于一些专家，他们可能会为我指明正确的方向。

概念如下，概念上比较基础的思路:

1. 服务器端定期从数据库中获取最新数据。
2. 这些数据被放入由 Backbone.js、Ember.js 或 KnockoutJS 等管理的模型中。
3. 在更新时， Canvas 上的元素会使用相关信息进行更新( Canvas 由 KineticJS 或 Fabric.js 等管理)。
4. 有可能逆转此过程，将 Canvas 上的更改发送回服务器。

所以我的问题是:将 Canvas 模型( Canvas 库的模型)与其中一个 MVVM/MVP 模型的模型链接起来是否可行？我看过的那些似乎都集中在 HTML 元素上(我以前在那个上下文中涉足过 KnockoutJS)，但这次我试图管理 Canvas 元素。如果可能(或不可能)，或者如果需要自行开发的解决方案，我应该注意什么，有什么陷阱，我可能错过或忘记了什么？

好像something similar came up就在几年前，从那以后它发生了变化还是仍然是家庭种植解决方案的问题？可以扩展其中的答案吗？

我不是在寻找完整的解决方案，而是寻找有一定经验的人给我一些指导(我是工作中唯一在这方面有任何经验但没有人可以交谈的人通过它或什至掌握对它的理解，我正在绕圈子)。

提前致谢。

Answer 1

我不确定这是一个很好的答案，而且我很想知道是否有其他选择。但是，我最近做了一些与您提供的链接中建议的非常相似的事情。

如果您看一下 Backbone View，除了 DOM 管理内容之外并没有发生很多事情，正如您所说，这对 Canvas 元素毫无用处。因此，我制作了一个类似于 Backbone 的 View 的简单对象，用于 Canvas 元素(我使用了 easel.js)。

我不能说这段代码是完整的或任何东西，因为我只是在玩弄一下 easelJS...

var CanvasView = function(options) {
        this.model = options.model;
        this.initialize.apply(this, arguments);
    };
_.extend(CanvasView.prototype, Backbone.Events, {
    initialize: function(options) {
        // in extended view, hook up to model change events, etc.
        // Since I used easel, here I also created some easel DisplayObjects,
        // then update their positions/etc. in response to model changes.
    }
});

我想如果我在这方面做更多的工作，就会添加更多的东西，比如一个内置的画架“容器”，可能还有一个类似于 Backbone View 的声明性事件散列。