杜兰达尔单调问题

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 中，您可以将某个区域与模型绑定，并使用$parent使用属于视图模型的函数或属性：

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

所以基本上，只需应用 MVVM，模型 - 视图 - 视图模型。您要做的是创建一个超级模型，其行为也类似于视图模型。

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' }"