Функция OnClick в модулях / классах не работает - PullRequest
Новая
       15

Функция OnClick в модулях / классах не работает

0 голосов
/ 16 апреля 2019

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

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

Я использую веб-пакет для своего 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({ ....

My 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 (); "при нажатии на тестКнопка Может быть, у вас есть предложения. Если вам нужно больше кода, просто спросите, пожалуйста;)

1 Ответ

0 голосов
/ 25 апреля 2019

Решение:

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

...