Блог

Сейчас я создаю свое первое приложение с framework7.io , также с помощью javascript. Я не совсем новичок в работе с javascript.

Моя проблема сейчас в том, что я хочу иметь динамическую onClick функцию, которая создается внутри класса javascript. Но onClick событие не запускается.

Я использую webpack для своего javascript

Когда у меня все в app.js нем работало. Теперь я хочу сделать свое приложение более похожим на ООП, поэтому я реализовал свои классы и импортировал их.

Проблема в том, что событие onClick не запускается. Я попробовал это с идентификатором, но тоже не работает. Также проблемой является this контекст.

Я думаю, что проблема как-то связана с маршрутом. Для некоторой onChange функциональности я должен поместить код в pageInit внутри app.js того, что тогда работало.

Я попробовал то же самое с onClick представлением по умолчанию. Потому что мне нужно это событие на сайте / просмотре по умолчанию.

Мое приложение структурировано следующим образом:

У меня есть app.js что такое индексный файл. Здесь я включаю все классы / модули, которые мне нужны

Вот так:

 'use strict';

require('./framework7-4.2.2.bundle');
var config = require('./config');

var functions = require('./functions');


import RealEstate from './real_estate.js';

let real_estates = new RealEstate();
real_estates.loadDefaultRealEstates();

// Dom7
var $ = Dom7;

// Framework7 App main instance
var app = new Framework7({ ....
 

Мой real_estate.js

 ...

createRealEstatesCard(data) {
        functions.setOutPut('Called createRealEstatesCard(); with data ... ');
        functions.setOutPut(data);

        let fav = this.getRealEstateFavoritesStatus(data['real_estate_id']);

        if(fav) {
            fav = '<i data-real-estate-id="'  data['real_estate_id']  '" class="real-estate-fav material-icons">favorite</i>';
        } else fav = '<i data-real-estate-id="'  data['real_estate_id']  '" class="real-estate-fav material-icons">favorite_border</i> <button class="test">Test</button>';

        return ('<div class="card card-expandable">'  
            '              <div class="card-content">'  
            '                <div class="bg-color-red" style="height: 300px">'  
            '                  <div class="card-header text-color-white display-block">'   
            '                     <img src="'  data['real_estate_featured_image']  '">'  
            '                    ' fav ''  
            '                    <p style="font-size: 0.8em; width: 90%;">'   data['real_estate_title']   '</p>'  
            '                  </div>'  
            '                  <a href="#" class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px">'  
            '                    <i class="icon f7-icons">close_round_fill</i>'  
            '                  </a>'  
            '                </div>'  
            '                <div class="card-content-padding">'  
            '<p></p>'  
            '                  <p>Preis: <strong>'   data['real_estate_price']   ' € </strong></br>'  
            '                   Terms: <strong>'   data['real_estate_terms']  '</strong></br>'  
            '                   Zimmer: <strong>'   data['real_estate_rooms']  '</strong></br>'  
            '<a class="link" href="/real_estate/show/'   data['real_estate_id']   '/">Detail view</a></p>'  
            '                </div>'  
            '              </div>'  
            '            </div>');
    }
...
 

Я пробовал это следующим образом:

app.js

 var app = new Framework7({
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'XXXXXX', // App name
    theme: 'auto', // Automatic theme detection
    //* App routes */
    routes: [
        {
            path: '/',
            url: './index.html',
            on: {
                pageInit: function (event, page) {

                    var router = this;

                    /* remove sidebar */
                    router.app.panel.close('left');

                    $('.test').on('click', function (e) {
                        functions.setOutPut('.real-estate-fav');
                    });
                },
            }
        },
 

Внутренняя real_estate.js

 createRealEstatesCard(data) {
        functions.setOutPut('Called createRealEstatesCard(); with data ... ');
        functions.setOutPut(data);

        let fav = this.getRealEstateFavoritesStatus(data['real_estate_id']);

        if(fav) {
            fav = '<i data-real-estate-id="'  data['real_estate_id']  '" class="real-estate-fav material-icons">favorite</i>';
        } else fav = '<i data-real-estate-id="'  data['real_estate_id']  '" class="real-estate-fav material-icons">favorite_border</i> <button class="test">Test</button>';

        return ('<div class="card card-expandable">'  
            '              <div class="card-content">'  
            '                <div class="bg-color-red" style="height: 300px">'  
            '                  <div class="card-header text-color-white display-block">'   
            '                     <img src="'  data['real_estate_featured_image']  '">'  
            '                    ' fav ''  
            '                    <p style="font-size: 0.8em; width: 90%;">'   data['real_estate_title']   '</p>'  
            '                  </div>'  
            '                  <a href="#" class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px">'  
            '                    <i class="icon f7-icons">close_round_fill</i>'  
            '                  </a>'  
            '                </div>'  
            '                <div class="card-content-padding">'  
            '<p></p>'  
            '                  <p>Preis: <strong>'   data['real_estate_price']   ' € </strong></br>'  
            '                   Terms: <strong>'   data['real_estate_terms']  '</strong></br>'  
            '                   Zimmer: <strong>'   data['real_estate_rooms']  '</strong></br>'  
            '<a class="link" href="/real_estate/show/'   data['real_estate_id']   '/">Detail view</a></p>'  
            '                </div>'  
            '              </div>'  
            '            </div>');
    }
 

Функция functions.setOutPut();" works fine. It also has no output with console.log();» когда я нажимаю кнопку проверки
Возможно, у вас есть предложения. Если вам нужно больше кода, просто спросите, пожалуйста 😉

Решение:

Важно использовать подобные функции в функциях маршрутизатора OnPage. Card находится в framework7 особенность: вы должны поместить код внутри события экземпляра cardOpen.