Backbone ViewModel vs(Data)Model

Mat*_*man 5 javascript jquery mvvm backbone.js

在骨干中,我可以以不同的方式使用我的模型.

据我所知,(数据)模型用于存储数据(可能来自RESTful Web服务器),ViewModel用于存储有关特定视图的信息(例如隐藏/显示的视图状态).

我的大部分知识来自这个问题.

看完其中,笔者说的文章:

在数据更改时呈现UI,而不是用户交互

流程是:用户交互 - >数据更改 - >视图渲染.

例如,如果我们在音频播放器中编写播放/暂停切换按钮,则流程将为:

  • 用户点击"播放"
  • 模型(数据)状态变为'播放'
  • 视图以"播放"模式呈现

遵循此模式可确保从其他来源(例如快进,新播放列表,网络错误等)触发的状态更改将切换我们的按钮以执行正确的操作.换句话说,我们有一个单一的事实来源:每当我们的模型发生变化时,我们都知道应该渲染我们的按钮.

var PlayPauseButton = Backbone.View.extend({
  tagName: 'li',
  className: 'icon',
  initialize: function(){
    this.model.on('change:status', this.render, this);
  },
  render: function(){
    this.$el.removeClass('icon-play').removeClass('icon-pause');
    this.$el.addClass('icon-' + (this.isPlaying() ? 'pause' : 'play'));
  },
  events: {
    'click': function(){
      this.model.set('status', this.isPlaying() ? 'paused' : 'playing');
    }
  },
  isPlaying: function(){
    return this.model.get('status') === 'playing';
  }
});
Run Code Online (Sandbox Code Playgroud)

我开始怀疑使用每一个的优点和缺点.

假设我们每个视图只有一个模型(我知道我们可以有更多,但是如果我们将它限制为一个).我能想到,

ViewModel专业人士:

  • 文章中提到的那些.
    • 有关视图的信息将保存在模型中,从而防止视图混乱.
    • 状态信息可以在视图之间共享.

缺点:

  • 无法调用Backbone的save()方法,因为这会导致模型将不正确的数据保存到服务器(例如视图状态).
  • 无法轻松调用Backbone的fetch()方法,因为我们可能会践踏我们的视图数据.

(数据)模型专业人士:

  • 使用骨干内置的保存,获取等.
  • 视图可以共享数据,而不必担心存储在其中的视图特定数据.

缺点:

  • 模型只能用于数据

我在想这个是正确的吗?

我应该有我的数据模型和我的视图模型吗?

这如何与集合一起使用?

我知道Backbone很松散,并没有严格的规则.但是,有没有人有使用其中一个的真实世界经验?或两者兼而有之?

任何帮助表示赞赏.

Ins*_*rel 3

实际上,您假设无法在后端使用数据(域)模型,并且需要将数据作为 ViewModel 对象进行处理。Stack Overflow 领域经验丰富的专业人士教我的方法是:

1.) 始终对视图使用 ViewModel。不要使用域模型。域模型通常并不完全适合视图,这导致人们使用魔术字符串、请求缓存甚至会话来存储特定于视图的信息,所有这些都是不必要的。

2.) 由于这一点限制了您所指出的方式,例如无法使用 Backbone 中内置的数据模型方法,请使用对象映射器(您自己创建的或其他人之前创建的)来映射当您需要使用 ViewModel 的属性到数据模型的属性时。

这允许您拥有高度特定的 ViewModel,而无需担心无法使用 Backbone 自己的数据模型。

关于关于集合的稍微独立的问题,您应该存储 ViewModel 对象的集合以用于您需要的其他内容。例如,如果您有一个汽车列表,则应该为您的 CarListViewModel 提供一个 CarViewModel 对象列表。当您在模型阶梯上走得这么远时,如果您选择使用数据对象,它的影响会较小,但仍应避免。