使用 Knockout hasFocus 绑定清除 jQuery Mobile 搜索输入答案

【问题标题】：jQuery Mobile search input clear with Knockout hasFocus binding使用 Knockout hasFocus 绑定清除 jQuery Mobile 搜索输入
【发布时间】：2014-03-28 20:24:58
【问题描述】：

我无法让 jQuery Mobile 搜索输入文本“明文按钮”与 Knockout 的 hasFocus 绑定一起工作。

我的目标是当用户搜索时，屏幕上的其他内容消失。然而，当用户不搜索时，其他内容是可见的。一切正常，除了...

当我在 jQuery Mobile 搜索输入中键入并单击“X”以清除输入时，搜索输入失去焦点，但输入未被清除。应该发生的情况正好相反（搜索输入应该被清除并且搜索输入应该保持焦点）。

I've created a JSFiddle 显示我在说什么。

HTML

<div id="wrapper">
    <div data-role="content">
        <h3 data-bind="visible: !IsSearching()">I am some content</h3>
        <input type="search" data-bind="hasFocus: IsSearching" />
        <h3 data-bind="visible: !IsSearching()">I am some more content</h3>
    </div>    
</div>

Javascript

$(function() {
    ko.applyBindings(new MyViewModel(), document.getElementById("wrapper"));
});

function MyViewModel() {
    this.IsSearching = ko.observable(false);
}

【问题讨论】：

标签： jquery-mobile knockout.js

【解决方案1】：

我能够解决这个问题。我这样做是为了仅在搜索文本未聚焦并且搜索文本长度为 0 时隐藏页面上的其他元素。

如果有人遇到类似问题，here 是指向工作小提琴的链接。

这里是代码：

HTML

<div id="wrapper">
    <div data-role="content">
        <h3 data-bind="visible: !IsSearching() && SearchText().length == 0">I am some content</h3>
        <input type="search" data-bind="value: SearchText, hasFocus: IsSearching" />
        <h3 data-bind="visible: !IsSearching() && SearchText().length == 0">I am some more content</h3>
    </div>    
</div>

Javascript

$(function() {
    ko.applyBindings(new MyViewModel(), document.getElementById("wrapper"));
});

function MyViewModel() {
    this.IsSearching = ko.observable(false);
    this.SearchText = ko.observable("");
}

【讨论】：