Durandal Singletone Issue

Question

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; 
    }, 
}; 

當我離開這個構圖時，它仍然保存輸入中的數據。我怎樣才能讓觀測不記得值之後，我瀏覽了，所以當我再次啓動這個成分很清楚

Answer 1

只返回一個構造函數，而不是在視圖模型（模塊）定義功能的一個對象。

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; 
}; 

這樣，每次視圖模型被激活的時候，一個新的實例將被創建。如果您因爲某種原因需要單身人士，那麼您應該在停用中添加額外的邏輯以清除值。

你真的需要一個單身人士嗎？

編輯：

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; 
}; 

然後在你的UI可以綁定與模型某一區域，並通過使用$父使用屬於該視圖模型的功能或特性：

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

所以基本上，只需應用MVVM，model-view-ViewModel。你想要做的是創建一個超級模型，其行爲就像一個ViewModel。

Answer 2

可以使用激活事件來設置的初始值，

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

編輯
另一種選擇是手動實例化您的視圖模型，

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

    return ctor; 
}); 

在父視圖模型實例化的新模式，

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

然後在HTML指定視圖模型實例

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