Transcript Document

Knockout 4 Xaml Developer:
How your MVVM Skills Transfer
Guy In Front of the Room: @Derik Whittaker
What is Knockout Js?
Library which implements the
MVVM pattern in JavaScript
Uses a very
declarative syntax
Highly Malleable & Extendable
Does Knockout.js compete
against
jQuery ?
Detailed documentation @
www.knockoutjs.com
Knockout 4 the Xaml
@ Pluralsight
bitly.com/kjs4xaml
How to install
Knockout.js?
Install via NuGet
Can my MVVM skills
really Transfer ?
YES!
But ! 1-1
Concepts transfer
implementations don’t
How do my MVVM
skills Transfer?
Concept of DataContext
Concept of Binding
Concept of
Observable Properties
Concept of
Event Commanding
Core Features of Knockout.js?
Bound DataContext
<script type="text/javascript">
public
Home()
(function()
{
{ var viewModel = new k4xaml.MainViewModel();
InitializeComponent();
ko.applyBindings(viewModel);
DataContext
= new HomeViewModel();
})();
}
</script>
Observable Properties
public DateTime DueDate
{
get { return _dueDate; }
this.ReminderGuests
= ko.observableArray([]);
set
this.TempEmailAddress
= ko.observable("");
{
_dueDate = value;
RaisePropertyChanged(() => DueDate);
}
}
this.EmailAddress = “[email protected]”; // You will NOT be happy
Observable Gotcha
this.EmailAddress( “[email protected]”); // You will BE happy
Computed Observables
this.Reminder = ko.observable(new ReminderViewModel);
this.TimeChanged = ko.computed(function () {
if (_this.Reminder().Time() !== "") {
_this.Reminder().AllDay(false);
}
});
Styling Binders
<Ellipse Grid.Column="0" StrokeThickness="1"
Style="{Binding
Status.Description,
<div
data-bind="attr:
{class: StatusStyle}" />
Converter={StaticResource StateToEllipseConverter}}"
Margin="0,0,5,0" />
Control Flow Binders
<tbody
data-bind="foreach:
ToDos">
<ListBox
Grid.Row="1" Margin="0,0,0,25"
…
ItemsSource="{Binding ToDoItems}"
</tbody>
/>
Data Binders
<span
data-bind="text:
<TextBlock
Text="{BindingTask}"
Task}" ></span>
/>
<input
type="text"
data-bind="value:
Task"/>
<TextBlock
Text="{Binding
DueDate, StringFormat='d'}"
/>
Demo
Wrap Up
Knockout 4 the Xaml
@ Pluralsight
bitly.com/kjs4xaml
Thank you!
@derikwhittaker
http://devlicio.us/blogs/derik_whittaker
http://www.linkedin.com/in/derikwhittaker
http://bit.ly/DerikWhittaker_PS
Hope you enjoyed the session!