javascript – 如何将HTML5画布模型与MVVM / MVP数据框架链接

2023年4月2日 255次阅读

在多次尝试清除我对这件事的看法之后,我认为如果我转向一些可能能够指出我正确方向的专家,那将是最好的.

概念如下,概念中一个相当基本的概念：

>定期从服务器端从数据库中检索最新数据.
>此数据被放入由Backbone.js,Ember.js或KnockoutJS管理的模型中.
>在更新时,画布上的元素将使用相关信息进行更新(画布由KineticJS或Fabric.js管理).
>有可能扭转此过程,从画布上的更改将数据发送回服务器.

所以我的问题是：将canvas模型(canvas库的模型)与MVVM / MVP模型之一链接起来是否实用？我看过的那些似乎专注于HTML元素(我之前在那个环境中涉及过KnockoutJS),但这次我正在尝试管理canvas元素.如果它是(或不是)可能的,或者如果需要一个本土解决方案,我应该注意什么,有什么陷阱,我可能错过或忘记了什么？

它似乎是在几年前的something similar came up,从那时起它是否发生了变化,还是仍然是家庭发展解决方案的问题？那里的答案可以扩大吗？

我不是在寻找完整的解决方案,但对于那些有经验的人来说,给我一些方向(我是工作中唯一一个在这方面有任何经验的人,没有任何人可以通过或者,为了理解它,我在自己的圈子里跑.

提前致谢.

最佳答案 我不确定这是一个很好的答案,我很想知道那里是否有其他选择.但是,我最近做了一些非常类似于您提供的链接中建议的内容.

如果你看一下Backbone View,除了DOM管理之外没有太多的东西,就像你说的对于canvas元素一样没用.所以,我用类似于Backbone的View的样式创建了一个简单的对象,用于canvas元素(我使用了easel.js).

我不能声称这段代码是完整的或任何东西,因为我只是在玩easylJS …

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的声明性事件哈希.

点赞