Más contenido relacionado La actualidad más candente (20) Similar a XAML/C# to HTML5/JS (20) Más de Michael Haberman (15) XAML/C# to HTML5/JS 1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICE
JUNE 29 – JULY 3, 2014
Michael Haberman
From XAML / C# to HTML5 / JS
3. The difference
Lots of libraries (AngularJS,Jquery, BackBone, Knockout)
Doesn’t compile
Doesn’t have MVVM Features
5. The difference
Lots of libraries (AngularJS,Jquery, BackBone, Knockout)
Doesn’t compile
Doesn’t have MVVM Features
6. Type Script – lets make it compile!
Compiles your Javascript Code!!
Compile time errors
Intellisense
7. The difference
Lots of libraries (AngularJS,Jquery, BackBone, Knockout)
Doesn’t compile
Doesn’t have MVVM Features
8. What MVVM Feature do we want?
Data Binding
Converter
Mode
INotifyPropertyChanged
Command
Passing a parameter
Context Binding
9. Comparison
XAML 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
13. Visibility bound to ViewModel
KnockoutXAML
data-bind="if: HasLoggedinUser”
OR
data-bind="visible: Status() == 'Working'"
Visibility="{Binding HasLoggedinUser, Converter={StaticResource Converter}}"/>
16. Iterate through collections - XAML
<ItemsControl ItemsSource="{Binding Collection}" >
<TextBlock Text="{Binding Name}"/>
</ItemsControl>
18. 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>
19. 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>
20. 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" />
22. Comparison
XAML 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
23. The difference
Lots of libraries (AngularJS,Jquery, BackBone, Knockout)
Doesn’t compile
Doesn’t have MVVM Features
24. Summary
HTML5 + JS + Knockout isn’t scary!
Knockout provide an easy transition
for XAML developers
Go home and try it your self!