Как перемещать переменную javascript в twig?

Следующий код - для того, чтобы я был загружен на странице одной CSS или другой в зависимости от избранной темы. Этот код функционирует верно на странице HTML чистая, но когда я пробую это привести в мое приложение Symfony я не нахожу способ происходить с ним в JS маршрут CSS с Twig.

var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
            {};
            var themeName = themeSettings.themeName || '';
            if (themeName)
            {
                document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
            }
            else
            {
                document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
            }

А именно я хочу, что в href функции document.write меня загрузило (например) то, что с Twig оно было бы этим:

<link href="{{ asset('bundles/activos/css/app-red.css') }} "rel="stylesheet" >

Где app- он установлен и то, что он изменяет, так это слово red согласно стоимости переменной themeName

Для этого я попробовал следующее, но оно я не функционирует, таким образом:

 <script>
        var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
        {};
        var themeName = themeSettings.themeName || '';
        if (themeName)
        {
        document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app-' ~ themeName ~ '.css') }} ">');
        }
        else
        {
        document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app.css') }} ">');
        }
    </script>

Это бросает в меня эту ошибку:

Переменная "themeName" does not exist in:: base.html.twig at line 1188

Потом я попробовал делать это:

<script>
        var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
        {};
        var themeName = themeSettings.themeName || '';
        if (themeName)
        {
            var cadenacss = "asset('bundles/activos/css/app-')" ~ themeName ~ '.css">';
                {% set cadena=cadenacss %} 
                   document.write('<link rel="stylesheet" id="theme-style" href="{{ cadena }}">');
        }
        else
        {
        document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app.css') }} ">');
        }
    </script>

И также не функционируй, он показывает мне следующую ошибку:

Переменная "cadenacss" does not exist in:: base.html.twig at line 1189

Я не нахожу способ это делать перемещая переменную JS Twig. Сначала я хотел бы знать, существует ли какой-то способ перемещать переменные JS Twig, но если бы не sepuede делать, тогда захотело узнать какую-то другую форму о, что смог решать это.

5
задан 06.08.2016, 01:48
3 ответа

Благодаря тому, что я знаю всю возможную стоимость, которую может брать переменная themeName, я понял, что он мог решать это очень простым способом. Хотя с этим вариантом я не перемещаю никакой переменной с Javascript в Twig, поскольку я не даю ответ на титул вопроса, но да даю ему решение выдвинутой проблематики.

<script>
   var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
   {};
   var themeName = themeSettings.themeName || '';
   if (themeName)
   {
            if (themeName === "blue")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-orange.css') }}" rel="stylesheet" >');
                }
            if (themeName === "custom")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-custom.css') }}" rel="stylesheet" >');
                }
            if (themeName === "green")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-green.css') }}" rel="stylesheet" >');
                }
            if (themeName === "orange")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-orange.css') }}" rel="stylesheet" >');
                }
            if (themeName === "purple")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-purple.css') }}" rel="stylesheet" >');
                }
            if (themeName === "red")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-red.css') }}" rel="stylesheet" >');
                }
            if (themeName === "seagreen")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-seagreen.css') }}" rel="stylesheet" >');
                }
  }
    else{
         document.write('<link href="{{ asset('bundles/activos/css/app.css') }}" rel="stylesheet" >');
  }

  </script>

С ésto я смог решать это, хотя я остаюсь без знания, как было бы возможно делать другой формы, или же перемещая переменную themeName в Controller и потом возвращать ее в Twig; для случая, в котором он не знает возможную стоимость, которую может брать эта переменная.

3
ответ дан 24.11.2019, 13:42

Ты мог хранить переменную, которая дает тебе тему в одной куки-файл, с controller ты можешь делать это, и потом с языком сценариев JavaScript ты проверяешь, что существовал куки-файл, и получаешь хранившуюся стоимость; в случае когда не существует, так как ты устанавливаешь назначенную по умолчанию тему.


Практический пример осуществления

В controller ввода под приложение:

public function indexAction(Request $request){
   $miVariable = algo de la base de datos por ejemplo
   $vista = $this->renderView('AppBundle:Default:index.html.twig', array('varible'=$mivaraible));

   $response = new Response($vista);

    $cookieFromRequest = $request->cookies;
    if (!$cookiesFromRequest->has('myAppTheme'))
    {
        $cookieTheme = new \Symfony\Component\HttpFoundation\Cookie("myApptheme", "defaultTheme");
        $response->headers->setCookie($cookieTheme);
    }

    return $response;
}

И в языке сценариев JavaScript (приспосабливая это к настоящему упражнению и чтобы упрощать) используя pluggin jQuery.cookie, попробуй получать куки-файл с именем myApptheme:

var theme = $.cookie('myApptheme');
if(theme !== null)
{
   document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + theme + '.css">');
}
else
{
   document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
}


Я считаю, что другое решение состояло бы в том, чтобы хранить тему, выбранную пользователем в базе данных (если бы ты использовал базу данных), и, с языка сценариев JavaScript, получать эту стоимость путь AJAX (ты можешь помогать себя bundle FOSJsRoutingBundle чтобы называть controller с языка сценариев JavaScript).

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

2
ответ дан 24.11.2019, 13:42

Ты должен размещать прямо в тебе сдержись:

 <link href="{{ asset('bundles/activos/css/app-' ~ themeName ~ '.css') }} "rel="stylesheet" >

И в твоем controller ты должен перемещать этот параметр

return $this->render('index.html.twig', array(
    'template' => $template
));

Для этого случая не нуждаешься в AJAX, только нуждаешься ajax, если ты хочешь сделать обратное, переместить параметры Javascript Symphony

1
ответ дан 24.11.2019, 13:42
  • 1
    Я думаю, что ты не понял хорошо мой вопрос, относительно которого ты написал мне: " только ты нуждаешься ajax, если ты хочешь сделать обратное, переместить параметры Javascript в Symphony". Это точно - то, в чем я нуждаюсь. Ты можешь давать мне пример как делать это с ajax? –  Adriana Hernández 08.08.2016, 16:32

Теги

Похожие вопросы