Getting Started

Getting Started

Creating a binding

To bind a IWebView to a ViewModel:

IWebView view = ...;

var binding = await AwesomeBinding.Bind(view, viewmodel, JavascriptBindingMode.TwoWay);

The binding is a IDisposable that you need to clean-up when the view is disposed in order to clean-up any reference to the viewmodel.

JavascriptBindingMode allows the folowing binding:

 -TwoWay: regular back and worth binding between View and ViewModel

 -OneWay: updates in the ViewModel are propagated to View but not the other way

 -OneTime: View is created from ViewModel data when the binding is created but no updates are propagated

To bind to the ViewModel in HTML

Add the following code in your HTLM:

<script src="js/knockout.js" type="text/javascript"></script>

<script src="js/Ko_Extension.js" type="text/javascript"></script>

Both javascript files are part of this project (you can update the knockout file to more recent version if you want - current version 3.1.0)

Then use knockoutjs data-bind syntax to bind to the viewmodel.

For property:

      <span data-bind="text: Name">

For Nested property:

      <span data-bind="text: Child().Name">

For command:

     -use the custom command binding to bind Execute and CanExecute:
       <button data-bind="command: ChangeSkill">Click me</button>

    -use the custom execute binding to bind only Execute:
       <button data-bind="execute: ChangeSkill">Click me</button>