javascript - MVVM "binder"定义及其用法？

Question

我一直在网上四处寻找以更好地了解 MVVM一般而言。

关于 Wikipedia它说明了 MVVM 的组件模式是:

• 模型
• 查看
• 查看模型
• Binder

这是我第一次遇到 binder定义以及 model , view , view-model这是首字母缩略词的一部分。

MVVM 的维基百科定义 的“ Binder ”声明如下:

Declarative data- and command-binding are implicit in the MVVM pattern. In the Microsoft solution stack, the binder is a markup language called XAML. The binder frees the developer from being obliged to write boiler-plate logic to synchronize the view model and view. When implemented outside of the Microsoft stack the presence of a declarative databinding technology is a key enabler of the pattern.

问题:是否每个MVVM模式总是包含一个binder ？什么是binder 究竟用于什么？ 它是您实际编码 的东西还是 framework 进行的一些自动化操作？ ？

我工作并使用 AngularJS几乎每天都有人同意它的模式是 MVVM而不是 MVC/MVP .我知道 View Model这就是AngularJS电话 "Controller" ，作为“经典”的记忆MVC . 但是 AngularJS使用binder也？在 AngularJS 中编码时，我仍然没有看到类似的东西, 也许是 binder仅用于桌面编程框架而不是浏览器？

在维基百科上它给出了 WPF的 XAMl作为C# binder 的示例，那么 AngularJS 上的反例是什么？ ？ AngularJS的 templates和/或他们的 syntax是 view和/或 binder也是吗？

您能否对维基百科的文章提供更好的解释，也许可以举几个例子(AngularJS 和/或 WPF)？

编辑:我在 SO 上看了更多并找到了一个喜欢 these slides 的人其中介绍了术语MVB而不是 MVVM ，所以:这是binder吗？我们谈论的是可选的，它是否同时出现在 MVVM 中？和 MVB ？

binder仅引用data-binding在 View 之间进行和 View-Model ？你会如何表示 binder在图表上？它就像 this one 上的“数据绑定(bind)”吗？ ？

谢谢。

Answer 1

“绑定(bind)”是某种东西，它描述了 View 模型中的数据将如何显示在 View 中。 “绑定(bind)器”是执行绑定(bind)描述的操作的一些组件。绑定(bind)器对于 MVVM 框架很重要，因为它们允许您将 View 与 ViewModel 分离，并承担处理两者之间的状态同步的重重任。

Binder 做以下事情

• 解释(通常)在 UI 中定义的绑定(bind)
• 观察 View 模型的状态变化并更新 View
• 观察 View 的状态变化并更新 View 模型

请注意，初始状态的引入也是状态的改变，更新行为取决于对绑定(bind)的解释。

据我所知，没有一种编程语言将绑定(bind)的概念融入到语言中(即，通过语言特性同步一个对象的两个实例的状态，比如如何观察者模式作为 events 嵌入到 C# 中，因此在设计实现 MVVM 模式的系统时必须对绑定(bind)器进行编码。

如您的问题所述，维基百科对 Binder 的定义很糟糕。他们将标记语言与绑定(bind)行为混为一谈。 WPF 的标记语言 Xaml 只是描述对象图的 XML。它通过添加 markup extensions 来扩展 xml ，它们是通过特定格式的属性值定义的。

<!-- Attributes that are curly bracketed {} are markup extensions -->
<TextBox x:Name="My textbox lol" Text="{Binding Name}" />

xaml 反序列化器将这些特殊属性识别为标记扩展，它们实际上是扩展 MarkupExtension 的类。 xaml 反序列化器将它们包含在反序列化过程中。上述示例中的 Binding 类是 MarkupExtension 的一种类型，并且是 WPF 中 Binder 的主要(但不是唯一!)实现。

WPF 中的绑定(bind)系统非常复杂。它主要基于 DependencyProperties，但可以与 INotifyPropertyChanged properties 很好地交互并以有限的方式使用 POCO特性。在反序列化过程中，这些绑定(bind)按照标记中的描述进行实例化和配置，然后与绑定(bind)子系统一起工作，将 View 和 View 模型绑定(bind)在一起。

与 Angular 相比，我更熟悉 knockout，但过程相似。您在 UI 中定义绑定(bind)，框架会在构建 DOM 后不久的某个时间点对其进行解释。这是由框架本身确定的某种机制触发的。然后，框架解释这些绑定(bind)，以便将 View 模型中的可观察属性与 UI 绑定(bind)。

如果没有这种解释工作，您的绑定(bind)定义将只是停留在您的 HTML 中，什么都不做。某些东西必须解释它们并设置将处理状态同步的绑定(bind)。

在 Knockout 中，当您调用 ko.applyBindings() 时会发生这种情况，传入您的 View 模型。如果不调用它，所有 data-bind 绑定(bind)定义都不会在您的 html 中使用。

这个过程在每个框架中是如何发生的，它是如何实现的，以及每个框架如何调用它们的绑定(bind)，都可能不同。