title: durandal widget data bind and update by ajax
body: <p>I want to use a durandual widget in a view and the widget bind-data should be able to update by the AJAX call from page's view model js. I post my code in following </p>
  
  <p><strong>Here is my page Model: which shoud update email to "Hello after ajax call"</strong></p>
  
  <pre><code>email= ko.observable('Login/Register2222');
          var self = this;
          if ($('#btn-login').html() == 'Login') {
              $.ajax({
                  type: "Post",
                  url: "api/User/Login",
                  data: $('#form-user-login').serialize()
              })
              .success(function (response) {
                  if (response == true) {
                      $('#loginModal').modal('hide');
                      $('#LoginBtn').html('My Profile');
                      $("#LoginBtn").attr("data-target", "#profileModal");
                      $.ajax({
                          type: "Post",
                          url: "api/User/getLoginUserInfo",
                          data: $('#form-user-login').serialize()
                      })
                      .success(function (response) {
                          self.email("Hello");
                          router.navigate('#Test');
                      });
                  }
              });
          }
  </code></pre>
  
  <p><strong>Here is my page HTML with widget call</strong> </p>
  
  <pre><code>&lt;div data-bind="widget: { kind: 'email', email: email, prompt: 'Email', id: 'Profile_Email', name: 'UserCode' }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is my Widget View Model js</strong> </p>
  
  <pre><code>define(['plugins/router', 'durandal/app', 'knockout'], function (router, app, ko, composition) {
  
  function emailWidget() {
      var self = this;
      self.activate = function (options) {
          self.email = ko.observable(ko.unwrap(options.email));
          self.prompt = ko.observable(ko.unwrap(options.prompt));
          self.id = ko.unwrap(options.id);
          self.name = ko.unwrap(options.name);
      };
  }
  
  return emailWidget;});
  </code></pre>
  
  <p><strong>Here is my widget view html</strong> </p>
  
  <pre><code>&lt;input type="email"  placeholder="Email" class="form-control" style="text-align:right" data-bind="value: email, attr: { 'id': id, 'name':name}"/&gt;
  </code></pre>
  
  <p>The email value will update if I am not using it with a widget 
  With a widget the value will stay at 'Login/Register2222' 
  Please Help </p>