Requirejs с jquery в одностраничном приложении

0

Я изучаю RequireJS, в процессе я застрял с проблемой ниже:

Я пытаюсь реализовать одностраничное приложение. Ниже приведенный сценарий аналогичен реальной проблеме.

Index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="/require.js" data-main="main.js"></script>
</head>
<body>
    <button id="start">Start</button>
    <div id="buttonContainer"></div>
</body>
</html>

main.js

require([  'jquery' ], function( $) {
    $(function() {
        $("#start").click(function() {
            $("#buttonContainer").load("page1.html");
            require(['module1'],function(){});
        }); 
    });
});

page1.html

<div>
    <button id="button_1">Click Me!!</button>
</div>

module1.js

define(['jquery'],function($){
    $(function(){
        $("#button_1").click(function(){
            $("#buttonContainer").load("page2.html");
        require(['module2'],function(){});
        });
    });
});

page2.html

<div>
    <button id="button_2">Back</button>
</div>

module2.js

define(['jquery'],function($){
    $(function(){
        $("#button_2").click(function(){
            $("#buttonContainer").load("page1.html");
        require(['module1'],function(){});
        });
    });
});

При щелчке начала в index.html div заполняется Click me !! , при щелчке Click me !! DIV заполняется кнопку Назад и нажатием кнопки Назад Нажмите еще раз меня !! заполняется и наоборот.

При загрузке jquery html я вызываю require().. для вызова соответствующей js-функции для html. Правильно ли мой подход?

  • 0
    Ваш код работает правильно? если это так, ваш подход правильный. Если нет, что за сообщение об ошибке от вашего отладчика javascript?
  • 0
    Да, мой код выполняется .. события нажатия регистрируются только в первый раз. Последовательность по нажатию кнопки Пуск -> Нажмите меня! -> Назад -> Нажми меня !! после этой последовательности, когда я нажимаю на кнопку Click me !! событие нажатия на эту кнопку (button_1) не запускается.
Теги:
requirejs

1 ответ

1

Ваш подход неправильный. Ваш код будет работать, если требуется, чтобы module1 и module2 выполняли фабрику модулей каждый раз, когда ваш код требует модулей. Однако, как работает RequireJS, фабрика модулей выполняется только в первый раз, когда требуется модуль. ("Заводская" - это обратный вызов, который вы передаете, define при определении модуля.)

Мне непонятно, что гарантирует деление кода на модули так, как это делается в вопросе. Это кажется ненужным.

Если есть причина разделить на модули так, как это делается в вопросе, то я бы сделал модули действовать на странице только при вызове функции. Тогда module1.js может быть чем-то вроде:

define(['jquery', 'module2'], function ($, module2) {
    return function () {
           // Whatever actions I want...
    };
});

module2 будет структурирован как module1. main.js будет что-то вроде:

require(['jquery', 'module1'], function ($, module1) {
    $(function () {
        [...]
         // This calls the function you returned when defining module 1.
        module1();
        [...]
    });
});
Поделиться
  • 0
    Как правильно это сделать?
  • 0
    Я добавляю код в мой ответ, пока ты отправляешь свой комментарий. Посмотри снова.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню