繁体   English   中英

Backbone.js与非RESTful应用程序? (Backbone.js适合我当前的项目吗?)

[英]Backbone.js with non RESTful app? (is Backbone.js right for my current project?)

我正在试图弄清楚Backbone.js是否是我当前项目的正确框架:可视化应用程序。

我有很多问题:

1)状态/路由?

由于这不是典型的RESTful应用程序,而是具有各种图表类型和这些图表设置的可视化应用程序,如何在URL中维护状态? 假设我的areaChart模型有许多默认值,如下所示:

AreaChartModel = Backbone.Model.extend({
    defaults: {
        selectedCountries: [],
        year: 1970,
        stacked: false
    },
    initialize: function(){
        [...]
    }
});

在对模型的更新中,我想序列化其中一些属性,以便我可以为特定状态添加书签:chartApp.html#!year = 1970&stacked = false等。

反之亦然,当以这种状态启动应用程序时,我如何“取消”url状态并设置模型? 我可以使用Backbone的内在路由吗?

2)控制器和耦合?

看来Backbone有一个非常紧凑的视图模型耦合? 这真的是我应该将我的areaChartView绑定到模型吗?

AreaChartView = Backbone.View.extend({
    initialize: function(){
        areaChartModel.bind("change:year", this.render);
    }
});

这通常不是控制器的作用吗?

3)延续:模型与控制器?

鉴于这种情况: 在此输入图像描述

“补充工具栏”中的更改应触发一系列功能:
1)“应加载当前选择的新数据”
2)“基于此数据,应该更新可视化视图中的比例”
3)“应该呈现可视化视图”

我应该在哪里放置这些函数,如何在状态稳定时触发的模型中创建事件? (即,当调用了所有函数并且是时候设置视图状态了吗?)

1)我会尽可能使用“:params”和“* splats”来使用Backbone.js原生路由,阅读更多内容 您可以将所有查询都放入Backbone.js路由中,但我个人会牺牲某些东西来支持直观的UI按钮

例如,我将默认设置为线条,您无法使用URL预设,但更改为堆叠图表只需单击按钮即可。

我可能会偏离使用? 和&在我的网址中。 我可能会稍后回到这一点,因为它很有趣。

2)你的例子很好,你只需要记住Backbone.js MVC术语与传统的MVC无关。

Backbone Views本质上是传统MVC中的Controller。 骨干控制器只是在框架内部路由的一种方式。 与Backbone.js一起使用的模板引擎是传统的MVC视图。

3) 还在写作

关于问题#3,我将为滑块创建一个Model和一个View

然后我会将模型上的change事件触发与更新图形视图的视图中的某个函数相关联(比如更改比例)。 就像是:

var Slider = Backbone.Model.extend({})

var SliderView = Backbone.View.extend({
    initialize: function() {
        this.model.bind('change', this.render);
    }

    render: function() {
        // load data, change scales, etc.
    }
});

var slider = new Slider();
var slider_view = new SliderView({ model: slider });

也许一个好主意是将绑定放在父视图中,然后调度到子视图,协调他们的工作。

坐下一会儿,考虑维持整个州是否一个好主意? 拥有基于URL的状态管理的关键动机是能够支持基于浏览器的导航按钮并能够为页面添加书签。 在可视化应用程序中,您的数据可能每时每刻都在变化。 这不是您想要在app-url中保留的内容。 当用户为您的应用添加书签并在三天后回复它时,您真的想要这样吗 - 他看到三天数据的可视化? 对于您的场景,假设我没有误解您的要求,我建议您将数据状态保留在模型中。

关于视图与模型数据的同步,是的,您可以自己编写所有绑定逻辑。 在这种情况下,您的View类将负责在第一个渲染上设置绑定。 在随后的渲染调用(可以响应模型中的任何更改事件而调用)中,将刷新存在可视化的DOM /画布。

可能你应该期待一个数据同步插件,它可以为你提供大量的样板。 此页面列出了一些可用的数据绑定扩展。 Orchestrator是我一直在努力的另一个解决方案,在这方面可能会有所帮助。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM