Durandal Singletone问题

时间:2013-12-09 06:38:50

标签: javascript jquery singleton durandal

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

当我离开这个构图时,它仍然保留输入中的数据。我怎样才能让观察者在我离开后不记住价值观,所以当我再次推出这个作品时,它会很清楚

2 个答案:

答案 0 :(得分:2)

只需在viewModel(模块)定义函数中返回构造函数而不是对象。

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

这样,每次激活viewmodel时,都会创建一个新实例。如果出于某种原因需要单例,则应在停用时添加额外的逻辑以清除值。

你真的需要一个单身人士吗?

编辑:

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使用属于viewmodel的函数或属性:

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

基本上,只需应用MVVM,模型 - 视图 - ViewModel。你要做的是创建一个也像ViewModel一样的超级模型。

答案 1 :(得分:-1)

您可以使用activate事件设置初始值

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