Нокаут JS ясно вводит на фокус

Question

Нокаут JS ясно вводит на фокус

0

Я создаю приложение с нокаутом, которое очень сильно/тяжело. Я преувеличиваю свой код, чтобы поместить все в наблюдаемые массивы, чтобы я мог привязать эти массивы к моему HTML, и все, что видно в HTML, является шаблоном, а нокаут выполняет ногу, чтобы отобразить все элементы внутри этого шаблона.

Моя проблема теперь заключается в том, что мои ранее существовавшие четкие поля ввода в скрипте фокуса не работают, и я не совсем уверен, почему и как заставить его работать.

Это уже существующий скрипт и написан с помощью jQuery, и я чувствую, что в настоящее время происходит конфликт между нокаутом и 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);
                }
            });
        });

Заранее спасибо!

leaksterrr 01 май 2014, в 16:02

Источник

Теги:

javascript

jquery

knockout.js

knockout-2.0

2 ответа

2

Вы должны использовать привязку привязки toFocus вместо jQuery ("focus"). Я боюсь, что 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"));

Cameron Tinker 01 май 2014, в 11:10

0

Это не то, что мне нужно - мне нужно ориентироваться на каждый вход, обработчик click: должен запускаться при нажатии на вход, а не на другой элемент
leaksterrr 06 май 2014, в 14:57
0

В зависимости от того, как вы строите свой HTML, вы можете использовать этот подход. Событие click срабатывает при нажатии на элемент <b>. Я использовал это только в качестве примера. Его можно легко расширить для другой разметки HTML. Если бы вы использовали привязку foreach для ko.observableArray , вы могли бы применить привязки hasFocus / click к каждому элементу в вашей коллекции. Я настоятельно рекомендую использовать встроенные привязки нокаута, но я рад, что вы выяснили, как добиться желаемого эффекта с помощью ванильного JavaScript.
Cameron Tinker 06 май 2014, в 15:38

Ещё вопросы

Это не то, что мне нужно - мне нужно ориентироваться на каждый вход, обработчик click: должен запускаться при нажатии на вход, а не на другой элемент
В зависимости от того, как вы строите свой HTML, вы можете использовать этот подход. Событие click срабатывает при нажатии на элемент <b>. Я использовал это только в качестве примера. Его можно легко расширить для другой разметки HTML. Если бы вы использовали привязку foreach для ko.observableArray , вы могли бы применить привязки hasFocus / click к каждому элементу в вашей коллекции. Я настоятельно рекомендую использовать встроенные привязки нокаута, но я рад, что вы выяснили, как добиться желаемого эффекта с помощью ванильного JavaScript.

leaksterrr · Accepted Answer · 2014-05-06T13-33-00.000Z

Был конфликт с 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;
            }
        }