giới thiệu nhanh về mô hình mvvm (model-view-viewmodel)

Software Architecture Pattern

M-V-VM(Model-View-ViewModel)

Friday, July 26, 2013

View

ViewModel

Commands

Data

Binding

Model

Model

public class Person{

public Person() { }public string FirstName { get; set; }public string LastName { get; set; }public string Age { get; set; }

}

ViewModel

public class MainViewModel : INotifyPropertyChanged{

public event PropertyChangedEventHandler PropertyChanged;private void NotifyPropertyChanged(String propertyName){

PropertyChangedEventHandler handler = PropertyChanged;if (null != handler){

handler(this, new PropertyChangedEventArgs(propertyName));}

}}

ViewModel

private Person _selectedPerson;public Person SelectedPerson{

get { return _selectedPerson; }set{

if (_selectedPerson != value) {_selectedPerson = value;NotifyPropertyChanged("SelectedPerson");

}}

}

View

<TextBox Text="{Binding FirstName, Mode=TwoWay}" />

View

<ListViewItemsSource="{Binding ListOfPerson}"SelectedItem="{Binding SelectedPerson, Mode=TwoWay}" />

View

ViewModel

Commands

Data

Binding

Model

• The Mode property determines how changes are synchronized

between the target control and data source– OneTime – Control property is set once to the data value and any subsequent changes

are ignored

– OneWay – Changes in the data object are synchronized to the control property, but

changes in the control are not synchronized back to the data object

– TwoWay – Changes in the data object are synchronized to the control property and vice-

versa

<TextBlock x:Name="FirstName" Text="{Binding FirstName, Mode=OneWay}"/>

• ViewModels implement INotifyPropertyChanged

public class ProfileViewModel : INotifyPropertyChanged{

private Person _person;public Person Person{

get { return _person; }set {

if (value != _person){_person = value;NotifyPropertyChanged("Person");

}}

}

public event PropertyChangedEventHandler PropertyChanged;private void NotifyPropertyChanged(String propertyName){

if (null != PropertyChanged) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}}

<Button Command="{Binding EditCommand}"

CommandParameter="{Binding SelectedPerson}"

Content="Edit" HorizontalAlignment="Center"

VerticalAlignment="Center"/>

class EditPersonCommand : ICommand

{

ViewModel _viewModel;

public EditPersonCommand(ViewModel viewModel)

{

_viewModel = viewModel;

}

public event EventHandler CanExecuteChanged;

public bool CanExecute(object parameter)

{

return true;

}

public void Execute(object person)

{

_viewModel.EditPerson(person as Person);

}

}

• Reuse Model and View-Model code

• Test the ViewModel with unit tests

• Maintainability

• Can show design-time data in Expression

Blend and the Visual Studio designer

http://caliburnmicro.codeplex.com/http://mvvmlight.codeplex.com/

Rob EisenbergLaurent Bugnion

http://msdn.microsoft.com/en-us/library/gg405484%28v=pandp.40%29.aspx

http://msdn.microsoft.com/en-us/magazine/jj651572.aspx

Software Architecture Design

M-V-VM(Model-View-ViewModel)

18/07/2013