双向绑定 TwoWay MVVM

1前台代码

  <Grid>
        <StackPanel >
            <Grid x:Name="gridOne">
                <Grid.Resources>
                    <Style   TargetType="TextBlock">
                        <Setter Property="FontSize" Value="34"/>
                    </Style>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="姓名:" />
                <TextBlock   Grid.Column="1" Text="{Binding Name}"/>
                <TextBlock Grid.Row="1" Text="城市:" />
                <TextBlock   Grid.Column="1" Grid.Row="1" Text="{Binding City}"/>
            </Grid>
            <Grid x:Name="gridTwp">
                <Grid.Resources>
                    <Style   TargetType="TextBlock">
                        <Setter Property="FontSize" Value="34"/>
                    </Style>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="姓名1:" />
                <TextBox  Name="txtName"  Grid.Column="1" Text="{Binding Name,Mode=TwoWay}"/>
                <TextBlock Grid.Row="1" Text="城市1:" />
                <TextBox Name="txtCity"   InputScope="ChineseFullWidth"  Grid.Column="1" Grid.Row="1" Text="{Binding City,Mode=TwoWay}"/>
            </Grid>
        </StackPanel>
    </Grid>

2后台方法

  public class Person : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
            protected void OnPropertyChanged([CallerMemberName] string property="")
            {
                if (PropertyChanged!=null)
                {
                    PropertyChanged(this, new  PropertyChangedEventArgs(property));
                }
            }
            private string _name;

            public string Name
            {
                get
                {
                    return _name;
                }

                set
                {
                    if (_name!=value)
                    {
                        _name = value;
                        OnPropertyChanged();
                    }
                }
            }
            private string _city;

            public string City
            {
                get
                {
                    return _city;
                }

                set
                {
                    if (_city != value)
                    {
                        _city = value;
                        OnPropertyChanged();
                    }
                }
            }

        }

3数据绑定

    Person ps = new Person { Name="小刘" ,City="北京" };
            gridOne.DataContext = ps;
            gridTwp.DataContext = ps;
时间: 2024-11-10 19:36:09

双向绑定 TwoWay MVVM的相关文章

AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <opti

Vue实现数据双向绑定的原理

Vue实现数据双向绑定的原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调.当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter.用户看不

C#使用Xamarin开发可移植移动应用(3.进阶篇MVVM双向绑定和命令绑定)附源码

前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯..前面3篇就是基础内容..后面就开始逐渐要加深了,进阶篇开始了. 今天的学习内容? 今天我们讲讲Xamarin中的MVVM双向绑定,嗯..需要有一定的MVVM基础.,具体什么是MVVM - -,请百度,我就不多讲了 效果如下: 正文 1.简单的入门Demo 这个时间的功能很简单,就是一个时间的动态显示.

AngularJS学习笔记(一) 关于MVVM和双向绑定

写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之类的鸡肋就能看出来了.所以搞得ng很大.. 更主要的是,ng用一种和之前完全不同的思维方式去组织代码,它就是Model-View-ViewModel(MVVM). 这篇文章结构大概是1.MVVM和双向绑定 2.简单的购物金额计算的例子(转自miaov视频).如有问题还请看客斧正.^_^ 1.MVVM

mvvm双向绑定机制的原理和代码实现

mvvm框架的双向绑定,即当对象改变时,自动改变相关的dom元素的值,反之,当dom元素改变时,能自动更新对象的值,当然dom元素一般是指可输出的input元素. 1. 首先实现单向绑定,在指定对象的属性值发生改变时触发callback函数. 2. 单向绑定可采用ES5新增的defineProperty实现(或defineProperties),用了ES5注定就不支持IE9以下了,为了防止递归死循环问题,原有属性需要剪切到一个私有属性中保存. 3. 循环调用defineProperty定义闭包时

剖析Vue原理&amp;实现双向绑定MVVM

剖析Vue原理&实现双向绑定MVVM vue.js 双向绑定 javascript 邓木琴居然被盗用了 2016年08月16日发布 推荐 24 推荐 收藏 195 收藏,10.6k 浏览 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完

Vue之九数据劫持实现MVVM的数据双向绑定

vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛戳这里 整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2.实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数3.实现

MVVM框架(一)---双向绑定及设计模式

简单来说用 JavaScript 在浏览器中操作 HTML经历了以下几个阶段: 第一阶段:直接用 javascript 操作 dom 节点,使用浏览器提供的原生API; 第二阶段:由于原生 API 不好用,还要考虑浏览器兼容性,jQuery 横空出世, 以简洁的API迅速俘获了前端开发者的芳心: 第三阶段:MVC 模式,需要服务端的配合,javascript 可以在前端修改服务器渲染后的数据. 现在随着前端页面越来越复杂,用于对于用户的交互性要求也越来越高,仅仅用jQuery是远远不够, MVV

迷你MVVM框架 avalonjs 学习教程21、双向绑定链

avalon的双向绑定机制,是通过一条依赖链实现.此依赖链最底层是监控属性.监控数组,中层是计算属性.监控函数,再上点是求值函数,最上层是视图刷新函数. 所谓计算属性,监控属性,监控函数属性,我们改变它们的值,它们会引发视图变化:而监控数组,是我们调用它的一些方法,也会引发视图变化. var vm = avalon.define({ a: "这是监控属性", $b: "这是非监控属性", $skipArray: ["c", "d&quo