© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com

SELA DEVELOPER PRACTICEJUNE 29 – JULY 3, 2014

Michael Haberman

From XAML / C# to HTML5 / JS

How to transition???Don’t be scared Lets take our knowledge and experience to HTML JSMainly MVVM

The difference Lots of libraries (AngularJS,Jquery, BackBone, Knockout)

Doesn’t compile

Doesn’t have MVVM Features

Lots of libraries – 20 MVVM Frameworks ?!

The difference Lots of libraries (AngularJS,Jquery, BackBone, Knockout)

Doesn’t compile

Doesn’t have MVVM Features

Type Script – lets make it compile!Compiles your Javascript Code!!Compile time errorsIntellisense

The difference Lots of libraries (AngularJS,Jquery, BackBone, Knockout)

Doesn’t compile

Doesn’t have MVVM Features

What MVVM Feature do we want?Data Binding

ConverterModeINotifyPropertyChanged

CommandPassing a parameter

Context Binding

ComparisonXAML Knockout

Property changes Implement INotfiyPropertyChanged

Use KnockoutObservable

Collection changes Implement INotifyCollectionChanged

Use KnockoutObservableArray

Command Implement ICommand Access any method

Convert data Converter Computed

Binding Inline logic X V

Collection Iterate ItemsControl using DataTemplate Foreach binding using template

Access parent/root ViewModel Relative binding using RelativeSource

$parent / $root

Access another UI Element ElementBinding $element

Demo

Lets see how to setup the environment

Setting DataContext

KnockoutC#

var vm = new MySampleAPP.MainViewModel()ko.applyBindings(vm);DataContext = new MainViewModel();

Binding an element

XAML

<TextBlock Text="{Binding FirstName}"/>

Knockout

<input type="text" data-bind="value: FirstName"/>

Visibility bound to ViewModel

KnockoutXAML

data-bind="if: HasLoggedinUser”OR

data-bind="visible: Status() == 'Working'"

Visibility="{Binding HasLoggedinUser, Converter={StaticResource Converter}}"/>

Commands

XAMLKnockout

<Button Command="{Binding ChangeUser}"/><input type="button" data-bind="click: ChangeUser, valueUpdate:'input'"/>

Update Options

XAML Knockout

Default Afterkeydown

PropertyChanged Keyup

LostFocus Keypress

Explicit Input

Change

Iterate through collections - XAML <ItemsControl ItemsSource="{Binding Collection}" > <TextBlock Text="{Binding Name}"/></ItemsControl>

Knockout collections

Like ObservableCollection<T>

public Employees: KnockoutObservableArray<Employee> = ko.observableArray([]);

Iterate thought collections - Knockout<table data-bind="if: HasLoggedinUser"> <tbody data-bind="foreach: Employees"> <tr> <td><span data-bind="text: Name"></span></td> </tr> </tbody></table>

New style converters

Another way to update the UI via ViewModel’s Logic

self.SalaryState = ko.computed(() => {

…return “red”;

});

<span data-bind="text: Salary, style: { color: SalaryState()}" ></span>

Context binding - Knockout

Within foreach access to ViewModel and passing the current item as parameter

<input type="button" value="Delete" data-bind="click: $parent.DeleteEmployee" />

Knockout context bindingSimilar to relative source or element binding:

$parent - $parent[indexer]$root$element

ComparisonXAML Knockout

Property changes Implement INotfiyPropertyChanged

Use KnockoutObservable

Collection changes Implement INotifyCollectionChanged

Use KnockoutObservableArray

Command Implement ICommand Access any method

Convert data Converter Computed

Binding Inline logic X V

Collection Iterate ItemsControl using DataTemplate Foreach binding using template

Access parent/root ViewModel Relative binding using RelativeSource

$parent / $root

Access another UI Element ElementBinding $element

The difference Lots of libraries (AngularJS,Jquery, BackBone, Knockout)

Doesn’t compile

Doesn’t have MVVM Features

SummaryHTML5 + JS + Knockout isn’t scary!Knockout provide an easy transition for XAML developersGo home and try it your self!

Questions