Question

我有一个淘汰页面，我用正则表达式格式化输入。它使输入字段为MM / dd / yyyy格式。因此，如果用户输入“1111”，它将更改输入vbox以显示“01/01/2011”或“01111”将显示“01/01/2011”。

我面临的问题是我的observable只返回用户输入的击键而不是完全格式化的项目。例如，如果用户输入“1111”，我会返回“1111”而不是“01/01/2011”

这是Html片段

<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" data-regex="^((\d{0,2})|(\d{1,2}/?\d{0,2})|(\d{1,2}/?\d{1,2}/?\d{0,4}))$"
                       type="text" data-bind="textInput: dateofevent"/>

这就是我的淘汰赛绑定方式

var ViewModel = function (eventdt ) {
var self = this;
self.dateofevent = ko.observable(eventdt);
}

viewModel = new ViewModel("");

ko.applyBindings(viewModel);

试图找出我做错了什么。

Answer 1

我不会尝试在用户输入时格式化文本输入，因为这会使用户界面难以理解并且非直观的打字体验。

此外，它更复杂，因为在输入时，输入可能无效。

尝试在某些事件（例如模糊）上格式化您的输入，同时在击键时验证它：

＆＃13;

var viewModel = function() {
  var self = this;
  var regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
  this.isValid = ko.observable(false);
  this.date = ko.observable("");
  this.format = function() {
    self.validate(self.date());
    // TODO: something else
  }
  
  this.validate = function(newVal) {
    var matches = newVal.match(regex);
    if (!matches || matches.length != 4) {
      self.isValid(false);
    } else {
      self.isValid(true);
    }
  };
  
  this.date.subscribe(function(newVal) {
    self.validate(newVal);
  });

  this.style = ko.computed(function() {
    return self.isValid() ? "valid" : "invalid";
  }, this);
};

var vm = new viewModel();

ko.applyBindings(vm);

＆＃13;

.invalid {
  border: 1px solid red;
}
.valid {
  border: 1px solid green;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" type="text" data-bind="textInput: date, event: { blur: format }, css: style" />
<div data-bind="visible: isValid">OK</div>

＆＃13;

Answer 2

您应该尝试使用为此计算的读/写。查看淘汰文档中example 3的计算可观察量。

此外，这里有jsfiddle使用moment.js来帮助进行日期格式化。

var ViewModel = function (eventdt ) {
var self = this;
self.dateofevent = ko.observable(eventdt);

self.formattedDate = ko.pureComputed({
        read: function () {
            return moment(self.dateofevent()).format("MM/DD/YYYY");
        },
        write: function (value) {
            self.dateofevent(moment(value).toDate()); // Write to underlying storage
        }
    });

}

viewModel = new ViewModel(new Date("03/25/2015"));

ko.applyBindings(viewModel);

Knockout没有发送更新的值

2 个答案: