Question

我有一个输入文本框。当用户开始输入内容时，我想要一个带有一些内容的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());

的jsfiddle：

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

Answer 1

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

Answer 2

将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>

Knockoutjs：仅在文本框中写入内容时显示内容，如果删除数据则隐藏内容

2 个答案: