Щелчок Knockout.js не срабатывает внутри плагина jQuery Steps

Я использую плагин jQuery Steps для создания мастера, и на втором шаге вы добавите 1.. * fields, который представляет собой массив объектов JSON, которые будут отправлены на сервер. Я пытаюсь использовать Knockout, чтобы показать ввод для каждого имени поля.

При щелчке новое пустое поле должно быть помещено в массив, и должно отображаться текстовое поле. Однако функция addField не срабатывает внутри шагов form/jquery. Если я его уберу, то получится. Есть ли способ предотвратить вмешательство шагов jQuery в привязку? Вот сокращенная версия кода:

function AppViewModel() {
    var self = this;
    self.fields = ko.observableArray([]);
    self.addField = function() {
        // push field to self.fields
    }

}
ko.applyBindings(new AppViewModel());

// jQuery Steps
var form = $("#stepsForm");

form.children("div").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical"
});
table {
  border: 1px solid blue;
}
td {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
 
<form id="stepsForm" action="#" novalidate>
    <div class="form-container">
        <h3>Section1</h3>
        <section>
            <table class="table table-condensed">

                <tr data-bind="foreach: fields">
                    <td>
                        <div data-bind="text:FieldName"></div>test
                    </td>
                </tr>
            </table>

            <button data-bind="click: addField">Add another</button>

        </section>
    </div>
</form>


knockout.js jquery-steps
person Elliott    schedule 07.03.2016    source источник
comment
Используете ли вы настраиваемый обработчик привязки шагов? (Риторический вопрос, я не вижу, чтобы вы его использовали, но я думаю, что вам следует.)   -  person Tomalak    schedule 07.03.2016
comment
Нет, не знаю. Это действительно мой первый крэк и нокаут. Некоторые другие поиски, которые я сделал, ускользнули от использования обработчика Custom Binding, но после прочтения документации KO по нему я не смог охватить его достаточно, чтобы узнать, применимо ли оно к моей ситуации.   -  person Elliott    schedule 07.03.2016
comment
Я не знаю шагов jQuery, но я довольно хорошо разбираюсь в Knockout. Обычно вы не хотите иметь нокаутирующее приложение со второй библиотекой, которая выполняет манипуляции с пользовательским интерфейсом без надлежащего обработчика привязки, который подключает его к нокауту.   -  person Tomalak    schedule 07.03.2016
comment
Тем не менее, после превращения вашего кода выше в исполняемый фрагмент, похоже, он работает - по крайней мере, он что-то добавляет, я не уверен, что это то, что должно произойти.   -  person Tomalak    schedule 07.03.2016
comment
Действительно, ваши правки работают. Это заставляет меня задаться вопросом, возможно, это порядок, в котором ссылаются на библиотеки. Я поковыряюсь и отчитаюсь. Спасибо   -  person Elliott    schedule 07.03.2016
comment
jQuery-steps никоим образом используется в приведенном выше коде, поэтому на данный момент это стандартное приложение Knockout, которое добавляет ячейки таблицы. Вам нужно будет подробно описать, как именно вы планируете использовать плагин шагов.   -  person Tomalak    schedule 07.03.2016
comment
Бах. Дух. Вернуться к доске для рисования. Я включу код шагов выше   -  person Elliott    schedule 07.03.2016
comment
Давайте продолжим обсуждение в чате.   -  person Elliott    schedule 07.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Эта проблема сводилась к времени выполнения JavaScript. Это усложнялось тем, что я использую данные сервера для загрузки объектов Knockout (без ajax). Вот где я наконец наткнулся:

Мой JavaScript загружается в следующем порядке:

  1. jQuery, шаги jQuery, Knockout и т. д. (в комплекте)
  2. Файл JavaScript для представления
  3. Встроенный JavaScript, встроенный в представление

#2 – файл JavaScript для представления (например, fields.js)

$(document).ready(function () {

    var form = $('#stepsForm');

    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        stepsOrientation: "vertical"
    });
});

№3 – встроенный JavaScript в представление (например, fields.html)

<script>
    function AppViewModel() {
        var self = this;
        self.fields = ko.observableArray([]); 
        self.addField = function () {
            // push field to self.fields
        }
    }
    $(document).ready(function () {
        //Used MVC Razor engine to load some other server data into other KO objects here. (omitted for clarity)
        ko.applyBindings(new AppViewModel());

    })

</script>
person Elliott    schedule 08.03.2016