Sails js v1.1 с использованием двух интерфейсных «контроллеров» с ошибкой parasails (vue.js)
В предыдущем проекте с версией Sails (0.12) я разделил файл layout.ejs, чтобы управлять верхней панелью и нижним колонтитулом отдельно от тела. Это выглядело как
<%- partial('./partials/topnav.ejs') %>
<!-- begin::Body -->
<%- body %>
<!-- end:: Body -->
<%- partial('./partials/footer.ejs') %>
Я использовал AngularJS. Верхний бар был завернут в контроллер, а корпус в другой. В основном в партиалах код выглядел так
<div ng-controller = "topnavCtrl" ng-cloak>
//My topnav code
</div>
...
<div ng-controller = "aPageCtrl" ng-cloak>
//My page code
</div>
Я думал, что смогу сделать что-то подобное с Sails js 1.1, начав с варианта 1 для веб-приложения, но поскольку это не AngularJS, а Vue.js и парашюты, я понятия не имею, как исправить ошибку, которую я получаю:
Whoops An unexpected client-side error occurred. Cannot load page script (`topnav) because a page script has already been loaded on this page. Please check your browser's JavaScript console for further details. This message will not be displayed in production. If you're unsure, ask for help. Mon Mar 04 2019 16:32:05 GMT-0500 (EST)
И консоль браузера говорит:
[Error] Error: Cannot load page script (`topnav) because a page script has already been loaded on this page. registerPage (parasails.js:710:156) Global Code (topnav.page.js:1)
У моих частей topnav есть
<div id = "topnav" v-cloak>
//My topnav code
</div>
Если я удалю <div id = "mypage" v-cloak> со своей страницы «тело», ошибка исчезнет.
Очевидно, это как-то связано с Parasails, но есть ли способ использовать два «контроллера» для страницы в парусах v1? (Я называю их контроллерами, потому что в Sails 0.12 с AngularJS они назывались контроллерами, теперь я просто понятия не имею, что это такое!)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы сможете сделать это без проблем в Sails V1.
То, что у вас было изначально, все еще должно работать:
<%- partial('./partials/topnav.ejs') %>
<!-- begin::Body -->
<%- body %>
<!-- end:: Body -->
<%- partial('./partials/footer.ejs') %>
Хотя он предложил вам назвать ваши файлы footer.partial.ejs
Частицы не нужно оборачивать в контроллер, вы можете просто вызвать их на основе класса или идентификатора, что вы предпочитаете.
Кроме того, в вашем частичном файле .ejs вы не хотите иметь «v-clock», потому что он уже должен существовать в ваших отдельных файлах .ejs.
Так:
<div id = "topNav">
//top nav code
</div>
<div id = "homepage" v-clock>
<%- partial('../../partials/topnav.partial.ejs') %>
//homepage code
</div>
Обратите внимание, что, поскольку вы вставляете свои части в макет, вам не нужно добавлять их на каждую страницу. Я просто хотел показать наглядный пример.
Хорошо, но когда я это делаю, у меня возникает следующая ошибка: [Error] Error: Cannot load page script ('topnav) because a page script has already been loaded on this page. registerPage (parasails.js:710:156) Global Code (topnav.page.js:1) знаете ли вы, что ее вызывает?
О, хм, да, похоже, парасейлы не позволяют вызывать два просмотра на одной странице. Поэтому я думаю, что вам лучше всего переместить навигацию в компонент.
Итак... для этого мне нужно всего лишь заменить parasails.registerPage('topnav', {... на parasails.registerComponent('topNav', {...?
Хм, это не работает, я не знаю, как работать с компонентами.
Это не совсем так работает. Я сделал для этого пост: stackoverflow.com/questions/55010131/…
Извините, у меня нет представителя, чтобы прокомментировать ваш пост. $ sails generate component topnav выдает следующую ошибку: error: No generator called 'component' found. Did you mean 'sails generate api component'? Tip: Want to use a custom or community generator? Add it to your app's .sailsrc file under 'modules': You can use a relative path: [...]
О черт возьми, я думаю, я думал о помощниках. Позвольте мне обновить этот пост
Я не уверен в этом... моя верхняя навигация - это мое верхнее меню для всего моего приложения, с некоторым кодом, защищенным для администратора/вошедшего в систему пользователя. Размещение кода ejs в качестве шаблона в компоненте кажется мне довольно небезопасным:/
Кроме того, как вы добавляете компонент в свой html? <topnav></topnav> не показывает мое меню XD
Почему вы считаете, что это небезопасно?
тег - это то, что вы назвали своим компонентом, поэтому, если вы назвали его assets/js/components/tophat.js, вы используете <tophat></tophat>
Потому что, если кто-нибудь взглянет на файл приложения topnav.component.js с помощью инструмента проверки браузера, он увидит код шаблона html/ejs из компонента, поэтому появится <% if (me) { %> protected admin menu < } %>, который я не хочу видеть обычным пользователям. ..
Хм, мой файл assets/js/components/topnav.component.js, и ни <topnav>, ни <topnav.component> из файла макета не работают (мне пришлось бы добавить его плюс некоторый стиль div вручную на всех моих страницах, чего я действительно не хочу).
Также в качестве побочного примечания вы можете рассмотреть возможность перемещения верхней навигации в компонент, а не в частичный.