modules/classes 中的 OnClick 函数无法正常工作

Question

我现在正在使用 framework7.io 和 javascript 创建我的第一个应用程序。我不是使用 javascript.

的完全初学者

我现在的问题是我想要一个在 javascript class 中创建的动态 onClick 函数。但是 onClick 事件没有被触发。

我为我的 javascript

使用 webpack

当我在 app.js 中拥有所有内容时，它就可以正常工作了。现在我想让我的应用程序更像 OOP，所以我实现了我的 classes 并导入它们。

问题是事件 onClick 没有触发。我用一个 id 试了一下，但也没有用。还有一个问题是 this-context.

我认为问题与路线有关。对于某些 onChange 功能，我必须将代码放入 app.js 内的 pageInit 中，然后它才能正常工作。

我在默认视图中对 onClick 进行了同样的尝试。因为我在默认 site/view.

上需要这个事件

我的应用程序结构如下：

我有一个app.js索引文件是什么。这里我包括了我需要的所有classes/modules

像这样：

'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 withconsole.log();" 当我点击测试按钮时也许你有建议。如果您需要更多代码，请询问 ;)

Answer 1

解决方案：

在路由器 onPage 函数中使用这样的函数很重要。 Card 在 framework7 中是一个特殊的东西：你必须将代码放在 cardOpen 实例事件中。

modules/classes 中的 OnClick 函数无法正常工作

OnClick function in modules/classes not working

javascript

html-framework-7