#jquery #twitter-bootstrap #aurelia
#jquery #twitter-bootstrap #aurelia
Вопрос:
Мы исследуем aurelia-cli в качестве замены webpack и пытаемся понять его комплектацию, запустив простое приложение с bootstrap и парой шаблонов.
что мы сделали:
-
все новое со стандартной конфигурацией и установочными зависимостями
-
добавлено
import 'bootstrap';
в main.js после инструкции импорта среды -
npm установил jquery и bootstrap
-
добавлены записи в aurelia.json
"jquery", { "name": "bootstrap", "path": "../node_modules/bootstrap/dist", "main": "js/bootstrap.min", "deps": ["jquery"], "exports": "$", "resources": [ "css/bootstrap.css" ] }
- Добавлен bootstrap в приложение
export class App {
constructor() {
}
}
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="pull-left" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Events <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Discussion</a>
</li>
<li><a href="#">Job Board</a>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="col-xs-10">
<compose view-model="events"></compose>
</div>
<div class="col-xs-2">
<compose view-model="sponsors"></compose>
</div>
</div>
</template>
- Добавлено sponsors.html amp; sponsors.js и events.html amp; events.js в src на том же уровне, что и app.js . оба файла html и js для этих двух содержат определения just и class соответственно. В противном случае они пусты.
Когда я запускаю au run —watch, я получаю 3 ошибки js и 2 предупреждения:
ошибка vendor-bundle.js: 24678 Не обнаружена: для JavaScript Bootstrap требуется jQuery (анонимная функция) @ vendor-bundle.js:24678 Ошибка bootstrap.min.js: 6 Не обнаружена: для JavaScript Bootstrap требуется jQuery (анонимная функция) @ bootstrap.min.js:6
вышеуказанная ошибка появляется дважды
vendor-bundle.js:3777 Uncaught ошибка типа: h.load не является функцией
Предупреждения:
Ошибка необработанного отклонения: не удалось загрузить требуемый файл CSS: bootstrap/css/bootstrap.css в fixupCSSUrls (http://localhost:9000/scripts/vendor-bundle.js:23479:13 ) в http://localhost:9000/scripts/vendor-bundle.js:23518:16 Из предыдущего события: в CssResource.загрузить (http://localhost:9000/scripts/vendor-bundle.js:23517:10 ) в ResourceDescription.загрузить (http://localhost:9000/scripts/vendor-bundle.js:19128:28 ) в ResourceModule.загрузить (http://localhost:9000/scripts/vendor-bundle.js:19077:37 ) в http://localhost:9000/scripts/vendor-bundle.js:19438:43 Из предыдущего события: в ViewEngine.importViewResources (http://localhost:9000/scripts/vendor-bundle.js:19407:52 ) в ViewEngine.loadTemplateResources (http://localhost:9000/scripts/vendor-bundle.js:19377:19 ) в http://localhost:9000/scripts/vendor-bundle.js:19325:41 Из предыдущего события: в ViewEngine.loadViewFactory (http://localhost:9000/scripts/vendor-bundle.js:19309:67 ) в ConventionalViewStrategy.loadViewFactory (http://localhost:9000/scripts/vendor-bundle.js:16729:25 ) в HtmlBehaviorResource.загрузить (http://localhost:9000/scripts/vendor-bundle.js:20067:29 ) в http://localhost:9000/scripts/vendor-bundle.js:20600:18 Из предыдущего события: в CompositionEngine.createController (http://localhost:9000/scripts/vendor-bundle.js:20588:71 ) в CompositionEngine._createControllerAndSwap Создать контроллер и поменять местами (http://localhost:9000/scripts/vendor-bundle.js:20567:19 ) в CompositionEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:20647:21 ) в TemplatingEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:20915:38 ) в Aurelia.setRoot (http://localhost:9000/scripts/vendor-bundle.js:10267:21 ) в http://localhost:9000/scripts/app-bundle.js:82:22 Из предыдущего события: на объекте.настроить (http://localhost:9000/scripts/app-bundle.js:81:21 ) в http://localhost:9000/scripts/vendor-bundle.js:10022:22 Из предыдущего события: в конфигурации (http://localhost:9000/scripts/vendor-bundle.js:10017:48 ) в handleApp (http://localhost:9000/scripts/vendor-bundle.js:10008:12 ) в http://localhost:9000/scripts/vendor-bundle.js:10041:13 Из предыдущего события: в http://localhost:9000/scripts/vendor-bundle.js:10039:40 Из предыдущего события: в http://localhost:9000/scripts/vendor-bundle.js:10038:29 Из предыдущего события: при запуске (http://localhost:9000/scripts/vendor-bundle.js:10034:26 ) на объекте. (http://localhost:9000/scripts/vendor-bundle.js:10061:3 ) в Object.execCb (http://localhost:9000/scripts/vendor-bundle.js:3785:299 ) в Object.check (http://localhost:9000/scripts/vendor-bundle.js:3774:50 ) в Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3779:58 ) в Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3783:433 ) на объекте. (http://localhost:9000/scripts/vendor-bundle.js:3778:436 ) в http://localhost:9000/scripts/vendor-bundle.js:3763:140 в y (http://localhost:9000/scripts/vendor-bundle.js:3762:207 ) в Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3777:469 ) при Object.init (http://localhost:9000/scripts/vendor-bundle.js:3772:154 ) в http://localhost:9000/scripts/vendor-bundle.js:3782:308
любая помощь очень ценится.
Ответ №1:
Проблемы, которые вы видите с Bootstrap, связаны с тем, что JavaScript Bootstrap написан не так, чтобы ожидать использования jQuery с поддержкой модуля. Ожидается, что jQuery будет свойством window
объекта. Это можно увидеть в строке 7 здесь:https://github.com/twbs/bootstrap/blob/v3-dev/dist/js/bootstrap.js#L7
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap's JavaScript requires jQuery')
}
В настоящее время Aurelia CLI не может загружать файлы шрифтов и, следовательно, на самом деле не поддерживает объединение CSS Bootstrap. Моя личная рекомендация — загрузить Bootstrap (как CSS, так и JS) с CDN. В этом случае необходимо также загрузить jQuery из CDN.
Кроме того, пожалуйста, не используйте compose
для выполнения того, что вы делаете здесь. events
и sponsors
должны быть пользовательские элементы, которые загружаются с помощью require
элемента. Использование compose
для их загрузки является неправильным использованием compose
элемента, и вы заплатите за его использование снижение производительности.
Комментарии:
1. Я следовал курсу Брайана Нойеса aurelia, но использовал aurelia-cli для сборки. Я прочитал официальную документацию, которая дала мне представление о том, что синтаксис может быть неправильным. Урок заключается в том, что нужно быть осторожным / внимательным к управлению версиями в руководстве, учебных материалах, инструментах и IDE и их плагинах / расширениях. Уф!
Ответ №2:
Нам удалось это исправить.
Не было никаких проблем с bootstrap или плагином jquery, хотя они появлялись.
После просмотра документации Aurelia для element мы увидели, что он должен быть сконструирован следующим образом:
<compose view-model="events" view.bind="events.html"></compose>
вместо
<compose view-model="events"></compose>
мы используем расширение Aurelia Snippets 1.0.4 в Visual Studio Code, которое дало нам этот синтаксис при создании элемента compose:
<compose view="url" view-model="modelname"></compose>
Это, очевидно, не обновляется с обновлением фреймворка! Сообщения об ошибках тоже были не очень очевидны.
РЕДАКТИРОВАТЬ: Пожалуйста, ознакомьтесь с комментариями члена основной команды aurelia о том, когда использовать <compose>
. Также помните о руководстве или обучающем видео. Всегда проверяйте официальную документацию здесь
Комментарии:
1. Пожалуйста, НЕ ИСПОЛЬЗУЙТЕ COMPOSE ТАКИМ ОБРАЗОМ!!!!! Я продолжаю видеть это повсюду в Stack Overflow.
compose
Элемент предназначен для ДИНАМИЧЕСКОЙ композиции. То, что вы здесь делаете, — это статическая композиция. Вы создали пользовательский элемент, и Aurelia подключит его к вам. ТАК ЧТО ИСПОЛЬЗУЙТЕ ЭТО!<events></events>
2. Позвольте мне повторить здесь. Использование
compose
вместо пользовательского элемента, когда вы не делаете ничего динамического, ЗАМЕДЛИТ РАБОТУ ВАШЕГО ПРИЛОЖЕНИЯ. Не используйтеcompose
, если вы не делаете что-то динамичное. Это исходит непосредственно от основной команды Aurelia.