Knockoutjs:只在文本框中写入内容时显示内容，在删除数据时隐藏内容

Knockoutjs: show content only if something its written in a textbox and hide it if the data is deleted

本文关键字：显示 删除 隐藏 数据 文本 Knockoutjs      更新时间：2024-04-22

我有一个输入文本框。当用户开始键入内容时，我希望显示一个包含一些内容的div。我可以做一些类似的事情，但只有在订阅了输入的值后，输入才会失去焦点。但我希望div在用户输入内容时是可见的，如果用户从输入中删除数据，则它将隐藏起来，所有这些都不会丢失输入的焦点：

html:

<input type="text" data-bind="value: currentValue" />
<div data-bind="visible: hasData">
 Has Data  
</div>

javascript:

    var MyViewModel = function() {
      this.currentValue = ko.observable();
      this.hasData = ko.observable(false);
        this.currentValue.subscribe(function(newValue){
            if (newValue !== ""){
                this.hasData(true);
            }
            else{
                this.hasData(false);
            }
        }, this);
    }
ko.applyBindings(new MyViewModel());

Js报价：

http://jsfiddle.net/2Qnv7/115/

将hasData实现为computed observable

var MyViewModel = function () {
    var self = this;
    self.currentValue = ko.observable();
    self.hasData = ko.computed(function () {
        if (self.currentValue() !== "")
            return true;
        return false;
    });    
}
ko.applyBindings(new MyViewModel());

然后在视图中使用valueUpdate

<input type="text" data-bind="value: currentValue, valueUpdate: 'afterKeyDown'" />
<div data-bind="visible: hasData">
   Has Data  
</div>

您应该使用valueUpdate: 'afterkeydown'(http://knockoutjs.com/documentation/value-binding.html)。看看：http://jsfiddle.net/9yL68/

相关文章：