Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >谈谈数据绑定

谈谈数据绑定

作者头像
四火
发布于 2022-07-18 05:42:52
发布于 2022-07-18 05:42:52
89000
代码可运行
举报
文章被收录于专栏:四火的唠叨四火的唠叨
运行总次数:0
代码可运行

Wikipedia 上数据绑定的定义是:

Data binding is the process that establishes a connection between the application UI (User Interface) and business logic. If the settings and notifications are correctly set, the data reflects changes when made. It can also mean that when the UI is changed, the underlying data will reflect that change.

就是说,数据绑定是用来给视图层和业务逻辑层建立连接的,把业务逻辑的数据变化体现到视图的展示上面去,反之亦然。其实质,不妨这样理解,就是将数据对象序列化并传递给视图的过程。

XML 数据绑定是最原始的种类的,比如 WPF 里面的数据绑定(http://msdn.microsoft.com/zh-cn/library/ms752347(v=vs.110%29.aspx):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<DockPanel
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:c="clr-namespace:SDKSample">
  <DockPanel.Resources>
    <c:MyData x:Key="myDataSource"/>
  </DockPanel.Resources>
  <DockPanel.DataContext>
    <Binding Source="{StaticResource myDataSource}"/>
  </DockPanel.DataContext>
  <Button Background="{Binding Path=ColorName}" Width="150" Height="30">I am bound to be RED!</Button>
</DockPanel>

这种语法无比啰嗦累赘,我不喜欢,虽说很多 DSL 都是这样设计的。JSP 中,JSTL 定义了一系列标签库,不过本质上没有什么区别:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<c:set var="bookId" value="${param.Remove}"/>
<jsp:useBean id="bookId" type="java.lang.String" />
<% cart.remove(bookId); %>
<sql:query var="books" dataSource="${applicationScope.bookDS}">
    select * from PUBLIC.books where id = ?
    <sql:param value="${bookId}" />
</sql:query>

基于 XML 的标签之后是各种表达式,比如 JSTL 表达式、OGNL 表达式,都有一个 “上下文” 的概念,需要展示的数据从上下文中根据输入的 key 去寻找:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
person.{?#this.age>20}

这样的表达式在执行前会被编译引擎编译成最终执行的代码。虽然看起来有些生涩,但是已经比啰嗦的 XML 好多了。

上面这两种形式结合起来,已经是我们最常用的情形了。

在 Grails 里面,提供了基于规约+特殊匹配的绑定形式(说到规约,我在 《MVC 框架的映射和解耦》这篇文章里面提到了基于规约的数据绑定,不需要配置文件,只需要遵守约定):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// binds request parameters to a target object
bindData(target, params)
// exclude firstName and lastName
bindData(target, params, [exclude: ['firstName', 'lastName']])

// only use parameters starting with "author." e.g. author.email
bindData(target, params, "author")
bindData(target, params, [exclude: ['firstName', 'lastName']], "author")

// using inclusive map
bindData(target, params, [include: ['firstName', 'lastName']], "author")

还有那种在代码中利用注解搞定的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class SomeClass {
    @BindUsing({
        obj, source -> source['name']?.toUpperCase()
    })
    String name
}

当然,API 调用+代码注解这种方式肯定不如页面模板这样来得直观。

现在,我们不妨把 CSS 选择器也理解成一种将样式数据绑定到 DOM 树的方法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
table tr td.tdxx{
    background: red;
}

这样理解的话,你也一定会觉得,CSS 选择器在当时出现的那个年代,已经足够先进了,代码非常精简。

如果你用过 AngularJS,你应该对其中数据绑定到 DOM 树的语法记忆犹新:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<li ng-repeat="image in images">
    <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>

上面的代码相当于把数个 for 循环中 img 标签的输出非常优雅地展示出来了。

在很多情况下,我们并不需要把数据和 DOM 的展示分开,DOM 是可以任意扩展的,把数据和展示放在一起,很大程度上会增加可读性,并且便利操作。我们曾经见证过随着软件的发展,写一个 web 应用逐渐解耦的过程,但是现在也有很多人跳出来说,不,太罗嗦了,又是 model 又是 view 又是 viewmodel 的,数据应该最天然地和展示结合起来,不需要额外定义专门的类和对象。

上面是我总结的常见数据绑定种类,以及我的理解,如果你有其它的数据绑定方式,不妨告诉我。:)

PS:JSR-227 作为 Java 尝试定义的标准数据绑定和数据访问设施,最终还是流产了,感兴趣的话可以参阅

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接 《四火的唠叨》

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
WPF-数据绑定
这是数据绑定中的特殊情况,Binding源本身就数据且不需要Path来指明,string、int等基本数据。
MaybeHC
2024/04/23
1100
WPF-数据绑定
C# WPF MVVM开发框架Caliburn.Micro常用功能指南②
将EventArgs或输入参数传递给操作。注意:对于保护方法,这将是null,因为触发器实际上没有发生。
用户9127601
2022/01/13
8570
【翻译】WPF中的数据绑定表达式
有很多文章讨论绑定的概念,并讲解如何使用StaticResources和DynamicResources绑定属性。这些概念使用WPF提供的数据绑定表达式。在本文中,让我们研究WPF提供的不同类型的数据绑定表达式。
沙漠尽头的狼
2021/12/01
2.6K0
【翻译】WPF中的数据绑定表达式
WPF 数据绑定实例一
原理:监听事件机制,界面改变有TextChanged之类的事件,所以改变界面可以同步修改到对象
zls365
2021/02/26
8810
C# wpf编程CM框架快速入门项目实例
将导致TextBox的“Text”属性绑定到ViewModel的“FirstName”属性。
用户9127601
2021/12/29
8860
C# wpf编程CM框架快速入门项目实例
C# WPF数据绑定方法以及重写数据模板后数据绑定
本文将会介绍WPF如何实现前后端数据绑定和在进行数据绑定时常用的方法和类以及对于DataGrid、ListView这样的控件重写数据模板后控件如何进行数据绑定。
郑子铭
2023/08/29
9120
C# WPF数据绑定方法以及重写数据模板后数据绑定
silverlight数据绑定模式TwoWay,OneWay,OneTime的研究
asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后台服务端代码接收新值更新数据) silverlight中利用控件显示数据这一基本功能当然还保留,只不过因为silverlight应用不需要刷新(也不存在提交表单),所以当控件属性或数据源变化后,在如何相互影响这一块的处理上有所不同。 引用一段silverlight 3 sdk官方的解释: ... Silverlight 支持以下三种类型的绑定: 创建
菩提树下的杨过
2018/01/23
1.3K0
silverlight数据绑定模式TwoWay,OneWay,OneTime的研究
Silverlight数据绑定/IValueConverter学习笔记
先回忆一下aspx中的处理: 在aspx中,可以直接在后台定义一个变量,然后前台就可以用<%=xxx%>来将其"绑定"html控件上,比如下面这样,实在是很方便: using System; namespace WebApplication1 { public partial class _Default : System.Web.UI.Page     { protected string _Test = DateTime.Now.ToString(); protected void Page_
菩提树下的杨过
2018/01/23
9670
C# WPF MVVM开发框架Caliburn.Micro关于关于Actions⑤
为了开始我们的研究,我们将以简单的“Hello”示例为例,看看当我们显式地创建操作而不是使用约定时,它是什么样子。以下是Xaml:
用户9127601
2022/01/13
2.2K0
C# WPF MVVM开发框架Caliburn.Micro关于关于Actions⑤
WPF中的MVVM模式
定义一个视图模型(ViewModel)类,代表了应用程序中的界面逻辑和数据。视图模型需要继承自INotifyPropertyChanged接口,以便能够通知视图界面进行数据更新。
软件架构师Michael
2024/04/01
2520
【愚公系列】2023年02月 .NET CORE工具案例-Caliburn.Micro的使用基于WPF的改造的MVVM案例
Caliburn.Micro是一个微软开发的用于构建WPF,Silverlight和Windows Phone应用程序的MVVM(模型-视图-视图模型)框架。它提供了一系列的工具和类,帮助开发人员更快,更轻松地构建美观的和可维护的应用程序。
愚公搬代码
2023/03/16
1.2K0
【愚公系列】2023年02月 .NET CORE工具案例-Caliburn.Micro的使用基于WPF的改造的MVVM案例
MvvmCross 框架中的数据绑定语法
数据绑定一直是 MvvmCross (Mvx) 框架的核心, 随着 Mvx 版本的版本更新, 绑定语法由 Json 变化到了 Swiss 语法, 并逐渐向 Tibet 过度。 由于基于 Json 的绑定语法在 Mvx 3.0 之后的版本已经标记为过时, 不再支持, 因此不做介绍, 本文详细介绍 Swiss 和 Tibet 语法。
beginor
2020/08/06
1.6K0
WPF 应用程序开发:一分钟入门
Windows Presentation Foundation (WPF) 是一个用于构建 Windows 桌面应用程序的框架。它提供了丰富的功能集,包括数据绑定、控件、文档支持、图形、音频和视频,以及广泛的编程模型。本篇博客将带你快速了解 WPF 的基本概念,并通过一些常见的问题和易错点来深入探讨如何更高效地进行 WPF 应用程序开发。
Jimaks
2024/09/26
5780
Android Data Binding(数据绑定)用户指南
1)介绍 这篇文章介绍了如何使用Data Binding库来写声明的layouts文件,并且用最少的代码来绑定你的app逻辑和layouts文件。 Data Binding库不仅灵活而且广泛兼容- 它是一个support库,因此你可以在所有的Android平台最低能到Android 2.1(API等级7+)上使用它。 需求:Android Plugin for Gradle 1.5.0-alpha1 或 更高版本。 2)构建环境 要开始使用Data Binding,首先需要在Android SDK Mana
庞小明
2018/03/07
2.1K0
Avalonia:可信创.NET 跨平台UI,让JAVA失业者转.NET信创开发!
亲爱的读者们,今天我想与大家分享一个令人兴奋的主题 —— Avalonia,这个强大的.NET跨平台UI框架。作为一名曾经的JAVA开发者,我深知转换技术栈的挑战。然而,在当前快速变化的IT行业中,适应新技术已成为我们的必修课。尤其是在信创产业蓬勃发展的背景下,Avalonia为我们提供了一个绝佳的机会,让我们能够无缝过渡到.NET生态系统,并在跨平台UI开发领域大展身手。
用户10786849
2024/07/25
2.4K0
Avalonia:可信创.NET 跨平台UI,让JAVA失业者转.NET信创开发!
Silverlight企业应用框架设计【六】自定义系统菜单(使用自己的DataForm)
SilverLight企业应用框架设计【五】客户端调用服务端(使用JSON传递数据,自己实现RESTful Web服务)
liulun
2022/05/09
6960
Silverlight企业应用框架设计【六】自定义系统菜单(使用自己的DataForm)
WPF --- TextBox的输入校验
之前在做一些参数配置功能时,最是头疼各种参数校验,查阅一些资料后,我总结了数据校验方式有两种:
Niuery Diary
2023/11/17
7700
WPF --- TextBox的输入校验
WPF --- TextBox的输入校验
之前在做一些参数配置功能时,最是头疼各种参数校验,查阅一些资料后,我总结了数据校验方式有两种:
Niuery Diary
2023/11/20
5370
WPF --- TextBox的输入校验
《深入浅出WPF》学习笔记之深入浅出话Binding
  如果把Binding比作数据的桥梁,那么它的两端分别是Binding的源(Source)和目标(Target)。一般源是逻辑层对象,目标是UI层控件对象.
zls365
2021/02/26
5.8K0
.NET Core 3 WPF MVVM框架 Prism系列之数据绑定
在上面或许我们有个疑问?为啥安装prism会跟Prism.Unity有关系,我们知道Unity是个IOC容器,而Prism本身就支持IOC,且目前官方支持几种IOC容器:
ryzenWzd
2020/04/29
1.5K0
推荐阅读
相关推荐
WPF-数据绑定
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验