Nano Hash - криптовалюты, майнинг, программирование

Durandal SPA берет на себя регулярную маршрутизацию веб-сайтов

Я создаю простой старый веб-сайт, на одной из страниц которого есть одностраничное приложение. На панели навигации есть другие страницы, такие как «Главная», «О программе», «Блог», а мое приложение находится на панели инструментов.

Изучив свой вариант SPA, я решил попробовать Durandal, потому что он кажется наиболее дружественным к моему сайту ASP.NET Web Pages. Я использую Hot Towelette, так как он кажется довольно хорошим пакетом, хотя я могу переключиться на обычный Durandal, так как я не могу использовать все функции Towelettes.

После настройки пакета Nuget я обновил index.cshtml до своего dashboard.cshtml и соответствующим образом связал его на панели навигации. С моей домашней страницы я могу перейти на панель инструментов, и SPA срабатывает и работает нормально. Однако, когда я нажимаю кнопку «Домой» (или блог, информацию и т. д.) на панели инструментов, страница просто возвращает меня к исходному виду SPA.

Вот мой файл dashboard.cshtml после того, как я изменил его с index.cshtml. Я не внес никаких других изменений в материалы Hot Towelette, которые пришли из Nuget.

@using System.Web
@using System.Web.Optimization
@{
    Layout = "Layout/_Layout.cshtml"; //<--- My nav bar with my other links are in here
}
<div id="applicationHost">
    @RenderPage("_splash.cshtml")
</div>

@Scripts.Render("~/scripts/vendor")
@if (HttpContext.Current.IsDebuggingEnabled)
{
    <script type="text/javascript" src="App/durandal/amd/require.js" data-main="/App/main"></script>
}

else
{
    <!-- Remember to run the Durandal optimizer.exe to create the main-built.js  -->
    <script type="text/javascript" src="App/main-built.js"></script>
}

В: Как мне настроить страницу SPA Durandal на обычном веб-сайте, чтобы она не перенаправляла все мои страницы?

Изменить Вот раздел навигации:

//Original
<nav>
    <a href="/">Home</a> 
    <a href="aboutus">About Us</a>  
    <a href="blog">Blog</a>
</nav>

Изменение их на следующее, похоже, не имеет значения. Кроме того, он принудительно добавляет расширение .cshtml в URL-адрес, хотя я использую FriendlyUrls.

//Ineffective Changes
<nav>
    <a href="default.cshtml">Home</a> 
    <a href="aboutus.cshtml">About Us</a>  
    <a href="blog.cshtml">Blog</a>
</nav>

  • Какую версию Дюрандаля вы используете? 01.10.2013
  • Последняя версия: 2.0.0 01.10.2013

Ответы:


1

Единственное известное мне решение - сделать URL-адрес в ссылке абсолютным, например:

<a href="http://www.MyGreatPage.html"></a>

но я знаю, что это не всегда возможно.
Я постараюсь вернуться с лучшим решением.

30.09.2013
  • Спасибо за ответ. Поскольку в настоящее время я работаю над страницей в автономном режиме, я надеюсь, что есть другой способ, потому что мне придется обновить все мои ссылки, когда я заставлю сайт работать с правильным доменным именем. 30.09.2013

  • 2

    Вы не предоставили HTML-код, связанный со ссылками на панели навигации. Похоже, проблема именно в этом. Любая ссылка следующего вида вызовет срабатывание маршрутизатора Durandal:

    <a href="#/dashboard">Dashboard</a>
    

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

    <a href="index.html">Index</a>
    

    Можете ли вы убедиться, что именно так ASP.NET компилирует ваш исходный код веб-страницы?

    Изменить

    Другим вариантом было бы использовать привязку щелчка с API-интерфейсом навигации javascript:

    <a href="#" data-bind="click: function() { location.assign('index.cshtml') }">Index</a>
    
    30.09.2013
  • Спасибо за совет. Изменения, похоже, ничего не изменили. Пожалуйста, смотрите мои правки выше. 30.09.2013
  • Какая версия Дюрандаля? 01.10.2013
  • Последняя версия: 2.0.0 02.10.2013
  • Это должно быть так же просто, как сделать ваш маршрут '/index.cshtml' 14.10.2013

  • 3

    Возможно, было бы лучше переосмыслить вашу архитектуру:

    Вариант 1. Создайте целые проекты Hot Towelette для каждого SPA, который вы собираетесь создать.
    Вариант 2. И наоборот, вы можете сделать весь сайт SPA.
    Вариант 3: Просто используйте Дюрандаль, а не Горячую салфетку, как вы упомянули. (Если вы не хотите создавать целый проект для каждого SPA)


    Вариант 4. Взгляните на «HotTowelRouteConfig.cs». В этом файле есть ссылка на контроллер и действие по умолчанию. Вы можете просто добавить к маршруту по умолчанию префикс «spa», чтобы результат был таким:

    Дюрандаль: domain/spa/#/
    (не прерывая другие маршруты)

    Вариант 5. Глядя на контроллер (названный в "HotTowelRouteConfig.cs"), вы можете добавить к этому контроллеру определенные действия.

    Вариант 6. Создайте полностью новую конфигурацию маршрута с префиксом папки или чем-то еще. (обратный вариант 4)

    Дюрандаль: domain/#/
    Пользовательский маршрут: domain/pages/aboutus.cshtml

    Надеюсь это поможет.

    16.10.2013
  • Спасибо за отзыв. Хотя у меня не было возможности попробовать все ваши предложения, вариант 3 не сработал и дал те же результаты. С тех пор я переключился на Sammy.js, у которого нет этой проблемы. 16.10.2013

  • 4

    Поскольку ни один из других ответов не был принят, я хотел добавить свои 0,02 доллара -

    Убедитесь, что ваши маршруты, которые настраиваются динамически, включают относительный путь -

     <a href="">Index</a>
    

    И что ваши маршруты Durandal основаны на хеше. Обратите внимание, что разница здесь заключается в том, что хеш добавляется перед /.

     <a href="/#index">Index</a>
     <a href="#index">Index</a>
    

    Оба они работают и должным образом перехватываются маршрутизатором Дюрандаля.

    Для ваших маршрутов, отличных от Durandal, используйте относительные пути -

     <a href="/../index">Index</a>   
     <a href="/index">Index</a>   
     <a href="/controllerName/index">Index</a>   
    

    Все это должно работать, в зависимости от того, как вы находите свои представления (контроллер и т.д.).

    Другие возможности

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

    Есть две вещи, которые вы можете попробовать, чтобы увидеть, происходит ли это:

    router.mapUnknownRoutes(function(instruction){
        console.log(instruction);
        if (instruction.fragment === 'index.cshtml') {
             window.location('/' + instruction.fragment);
        }
    });
    

    Зарегистрируйте этот обработчик в main.js или любой другой точке входа, прежде чем активировать свой первый маршрут, и он должен перехватывать любые неизвестные маршруты. В этот момент проверьте, соответствует ли какая-либо часть инструкции (загляните в свою консоль, чтобы лучше понять, что она содержит) чему-то вроде .cshtml, и если да, создайте правильную строку URI и window.location.

    Это также позволит вам переопределить плохие маршруты, чтобы потенциально указать им на пользовательскую страницу ошибки.

    16.10.2013
  • Спасибо за отзыв. Я убедился, что у моего приложения есть правильные URL-адреса на основе хеша, и это не имело значения. С тех пор я переключился на Sammy.js, у которого нет этой проблемы. 16.10.2013
  • Но вы не проверили свои маршруты, не основанные на хеше. 16.10.2013
  • Извинения; Я проверил, что мои маршруты SPA были основаны на хеше, а мои маршруты не-SPA были относительными путями, и это не имело значения. 16.10.2013

  • 5

    Поскольку никакие другие варианты мне не подошли, в конечном итоге я решил перейти на Sammy.js. Я смог вставить Sammy.js в свое существующее приложение практически без усилий, и он не конфликтовал с остальной частью моего веб-сайта. В качестве дополнительного бонуса маршрутизация Sammy не запускает полную навигацию, а это означает, что полноэкранное приложение останется полноэкранным при навигации с помощью Sammy.js.

    16.10.2013
    Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..