Durandal Singletone Issue

define(['durandal/app', 'jquery'], function (app) {

return {
    self: this,
    title: 'Client Data',
    canSubmit: ko.observable(false),

    personalNumber: ko.observable().extend({
        required: true,
        minLength: 11,
        maxLength: 11 
    }),
    documentNumber: ko.observable(),
    documentType: ko.observable(),
    country: ko.observable(),
    firstName: ko.observable(),
    middleName: ko.observable(),
    lastName: ko.observable(),
    citizenship: ko.observable(),
    age: ko.observable(),
    sex: ko.observable(),
    city: ko.observable(),
    currentAddress: ko.observable(),
    registrationAddress: ko.observable(),
    phone: ko.observable(),
    mobile: ko.observable().extend({ 
        required: true
    }),

    email: ko.observable().extend({ 
        email: true
    }),

    canSubmit: function(){
        app.trigger('formIsValid:event', self.errors().length == 0);
        return self.errors().length == 0;
    },
    validate: function () {
        if (!self.canSubmit()) self.errors.showAllMessages();
    },
    compositionComplete: function () {

        //alert(apiLocation());

        $(document).on("keydown", ".personalID", function (k) {
            if(k.keyCode == 13)
                $(this).blur();
        })

        $(document).on("change", ".personalID", function () {

        });

    },

    errors: ko.validation.group(self),

    deactivate: function () {
        self = null;
    },
};

When I navigate away from this composition it still holds the data in inputs. How can I make observables not to remember values after I navigate away, so when I launch this composition again it will be clear

Answers


Just return a constructor function instead of an object in the viewModel (module) definition function.

define(['durandal/app', 'jquery'], function (app) {
    var vm = function(){
        var self = this;
        this.title= 'Client Data';  
        this.canSubmit = ko.observable(false);
        //... properties
        this.canSubmit = function(){
            app.trigger('formIsValid:event', self.errors().length == 0);
            return self.errors().length == 0;
        }
        //... methods
    };

    return vm;
};

This way, every time the viewmodel is activated, a new instance will be created. If you need singletons for a reason, then you should add extra logic in the deactivation to clear the values.

Do you really need a singleton?

EDIT:

define(['durandal/app', 'jquery'], function (app) {
    var vm = function(){
        var self = this;
        this.title= 'Client Data';  
        this.canSubmit = ko.observable(false);
        this.model = ko.validatedObservable({ 
                         personalNumber: ko.observable().extend({
                            required: true,
                            minLength: 11,
                            maxLength: 11 
                         }),
                         documentNumber: ko.observable(),
                         documentType: ko.observable(),
                         country: ko.observable(),
                         firstName: ko.observable(),
                         middleName: ko.observable(),
                         lastName: ko.observable(),
                         citizenship: ko.observable(),
                         // .....
                       });
        this.errors = ko.validation.group(this.model); 
        this.mustValidate = ko.observable(true);
        //...  add the properties
        this.canSubmit = function(){
            app.trigger('formIsValid:event', self.errors().length == 0);
            return self.errors().length == 0;
        }
        //... add the methods
    };

    return vm;
};

Then in your UI you can bind a certain region with the model, and use the functions or properties that belong to the viewmodel by using $parent:

  <form data-bind="with: model">
      <input data-bind="value: personalNumber" type="text"/>
      <button data-bind="click: $parent.submit, visible: $parent.canSubmit() />
  </form>

So basically, just apply MVVM, model - view - ViewModel. What you are trying to do is create a super Model that also behaves like a ViewModel.


You can use the activate event to set the initial values,

activate: function () {
 this.phone("");
 this.citizenship("");
 //....
},

Edit Other option is to manually instantiating your view model,

define(['durandal/app', 'jquery'], function (app) {
  var ctor=function(){
    this.phone("");
    //...
  }

  return ctor;
});

In the parent view model instantiate the new model,

   activate:function{
      this.myViewModel=new myViewModel();
    }

And then in the HTML specify the view model instance

data-bind="compose: { model:myViewModel, view:'myView.html' }" 

Need Your Help

how to add/convert certificate file into pkcs12 file

java x509certificate pkcs#12 jks cer

I have received the three certificates(.CER files) to access the production server. How I am going to add/convert these certificates into PKCS12 file.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.