Question

我正在构建一个带有淘汰赛的应用程序，其数量/输入很重。我反射我的代码以将所有内容放入observableArrays中，然后我可以将这些数组绑定到我的HTML中，并且HTML中可见的所有内容都是模板，Knockout正在执行这项工作来渲染此模板中的所有元素

现在我的问题在于我在焦点脚本上预先存在的明确输入字段不起作用，而且我不完全确定为什么或如何使其工作。

这是预先存在的脚本，用jQuery编写，我觉得现在Knockout和jQuery之间发生了冲突。不幸的是，我不知道如何在Knockout中重写脚本。

$('input:not(.total-val)').on('focus', function() {
            var default_value = $(this).val();
            if ($(this).val() == default_value) {
                $(this).val('');
            }
            $(this).blur(function () {
                if($(this).val().length == 0) /*Small update*/
                {
                    $(this).val(default_value);
                }
            });
        });

提前致谢！

Answer 1

你应该使用Knockout的hasFocus绑定代替jQuery（'焦点'）。我担心jQuery与Knockout的绑定事件冲突并导致文本在焦点上消失。这是一个例子：

<p>
    Name: 
    <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
    <input data-bind="visible: editing, value: name, hasFocus: editing" />
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>

JavaScript的：

function PersonViewModel(name) {
    // Data
    this.name = ko.observable(name);
    this.editing = ko.observable(false);

    // Behaviors
    this.edit = function() { this.editing(true) }
}

ko.applyBindings(new PersonViewModel("Bert Bertington"));

Answer 2

与jQuery vs Knockout争夺控制生成的输入存在冲突。我解决了这个问题，重构了Vanilla中的清晰输入脚本。

$('input:not(.total-val)').attr({'onfocus':'onFocus(this)', 'onblur':'onBlur(this)'})
        var default_value;
        onFocus = function(input) {
            default_value = input.value;
            if (input.value == default_value) {
                input.value = ''
            }
        }
        onBlur = function(input) {
            if (input.value == '') {
                input.value = default_value;
            }
        }

Knockout JS清晰地关注焦点

2 个答案: