Событие готовности формы / инициализации на Ninja Forms — Backbone / Marionette

В настоящее время я работаю с плагином «NinjaForms» для WordPress, который обеспечивает управление пользовательскими формами для серверной части. Он основан на Marionette/Backbone JS. После некоторых исследований у меня не возникло проблем с запуском функций JavaScript при изменении ввода и при отправке формы. Тем не менее, я не нашел способа ловить событие после инициализации/рендеринга/отображения формы (на самом деле, любого из них).

Что я делаю прямо сейчас, так это инициализирую объект Marionette, добавляю слушателей к радио, а затем добавляю функции для его выполнения по событию:

if(typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend( {
        initialize: function() {
            // init listener
            this.listenTo( Backbone.Radio.channel( 'forms' ), 'view:show', this.initAction);
            // field change listener
            this.listenTo( Backbone.Radio.channel( 'fields' ), 'change:modelValue', this.valueChanged);
            // submit listener
            this.listenTo( Backbone.Radio.channel( 'forms' ), 'submit:response', this.actionSubmit );
        },

        // init action
        initAction: function() {
            console.log("init");
        },

        // input update action
        valueChanged: function(model) {
            console.log("update");
        },

        // submit action
        actionSubmit: function( response ) {
            // handled via php

            console.log("submit");
        },
    });

    // initialise listening controller for ninja form
    new mySubmitController();
}

Однако линия this.listenTo( Backbone.Radio.channel( 'forms' ), 'view:show', this.initAction); не работает. Я пробовал события view:render, view:show, show:view, render:view безуспешно.

Я искал в документации Backbone/Marionette, но не смог найти подходящего события. Этот вопрос может быть дубликатом, но я не смог найти ни одной темы, касающейся событий инициализации формы с помощью Backbone.


person N. M.    schedule 01.08.2018    source источник
comment
вы устанавливаете обработчики для двух каналов. если этот канал остается бездействующим - это означает, что нет событий, которые вы слушаете, и вы никогда не увидите свои сообщения console.log. Вы можете проверить обработчик следующим образом: Backbone.Radio.channel('forms').trigger('view:show') - это должно выводиться на консоль инициализации. если вы не видите никаких журналов в консоли, это означает, что: а) во-первых, если утверждение ложно, и ваш mySubmitController не создан. б) ваши события никогда не запускались на этих каналах   -  person taburetkin    schedule 01.08.2018
comment
и, конечно, вы должны включить backbone.radio lib   -  person taburetkin    schedule 01.08.2018
comment
Я не хочу запускать события вручную, я хочу прослушивать событие, которое запускается после рендеринга формы, чтобы затем я мог манипулировать DOM формы с помощью Javascript. Однако запуск выводит init в консоль.   -  person N. M.    schedule 01.08.2018
comment
я просто говорю вам, что если никто не запустит событие - оно не будет поднято. если вы ожидаете, что, скажем, ninjaforms вызовет для вас эти события, то а) этого не произойдет, б) ниндзя вызовет другие события, которые вы не слушаете, в) ваше утверждение if ложно   -  person taburetkin    schedule 01.08.2018
comment
и конечно никаких специальных триггеров для рендеринга формы по умолчанию нет.   -  person taburetkin    schedule 01.08.2018
comment
Оператор if работает правильно. Я ищу конкретное событие Ninjaforms и/или Backbone и/или Marionette, поэтому я создал этот вопрос в первую очередь...   -  person N. M.    schedule 01.08.2018
comment
проверьте: 1) вы включили backbone.radio перед backbone.marionette скриптом 2) документация ниндзя для выяснения, есть ли какие-либо триггеры для этих событий. Backbone и Backbone marionette не запускают никаких событий, единственное место, где это можно сделать - формы ниндзя.   -  person taburetkin    schedule 01.08.2018


Ответы (1)


после долгих поисков, гугления и разочарования я нашел решение. Используя следующий код JavaScript, вы можете выполнить код при рендеринге формы:

// if there is a ninja form on this page
if(typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend( {
        initialize: function() {
            // init listener
            this.listenTo( nfRadio.channel( 'form' ), 'render:view', this.initAction );
        },

        // init action
        initAction: function() {
            // code to execute on form render
        },
    });

    // initialise listening controller for ninja form
    new mySubmitController();
}
person N. M.    schedule 06.08.2018
comment
Куда поставить JS? В тегах script на странице wordpress или где-то еще? - person Svante; 22.08.2018
comment
@Svante Я реализую файл scripts.js через functions.php, туда я помещаю свой код. - person N. M.; 03.09.2018
comment
Спасибо, я нашел это очень полезным: developer.wordpress.org/themes/basics /включая-css-javascript - person Svante; 04.09.2018
comment
Мне нужно было добавить nf-front-end в качестве зависимости при постановке моего скрипта в очередь в functions.php, чтобы убедиться, что он загружается после Marionette. - person gregdev; 06.03.2020
comment
Я считаю, что вы также можете использовать this.listenTo( Backbone.Radio.channel( 'forms' ), 'init:model', this.actionLoad ); - person Tim Hallman; 07.04.2021