Я пытаюсь использовать виджет сплитера Kendo UI в проекте Aurelia JS, который запускается через aurelia-cli (программа au).Разделитель Kendo UI для проекта aurelia-cli: высота в% и упаковка?
Чтобы воспроизводимый пример, я добавил bash ниже сценарий, который использует au, чтобы начать новый проект (с au new интерактивно только, и не имеет возможностей, которые были бы полезны для указания в пакетном режиме, я должен был используйте expect в скрипте для его автоматизации), затем добавьте соответствующие исходные файлы, в итоге создав и экспортируя их. Вот мои проблемы:
- Независимо от того, что я делаю, горизонтальный сплит имеет высоту 300 пикселей; Я хотел бы установить его высоту в процентах от родителя - как я могу это сделать?
- Когда я «экспортирую» «производственный» «комплектный» сайт, он не может загрузить - он терпит неудачу; он работает только через
au runпо телефонуhttp://localhost:9000. Как я могу «экспортировать» надлежащий «связанный» сайт?
О выпуске размер/высота - это то, что я получаю, когда я рассматриваю index.html через au run/localhost:9000:
Обратите внимание, что установка height я использовал в моем классе CSS для элемента div левой панели, перезаписываются каркасом Kendo, который явно записывает по высоте в встроенный атрибут style этого элемента. В связи с этим я нашел http://docs.telerik.com/kendo-ui/controls/layout/splitter/how-to/expand-splitter-to-100-height и Kendo UI Splitter height, которые предполагают, что JavaScript может понадобиться для этого, но я не уверен, как применить его в контексте Aurelia JS.
О проблеме пакетирования: Я нашел эту документацию (кстати, это можно отнести к конкретной версии рамочной в Aurelia хаб URL):
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/4
Aurelia CLI приложение всегда запускаются в сложном режиме, даже во время разработки. Чтобы создать приложение, просто запустите
au build. ...
По умолчанию, Aurelia CLI создает два пучка:app-bundle.jsиvendor-bundle.js.
Путь я это понял, что каждый требуется зависимость в node_modules получает «составлен в» в двух файлах .js в scripts/ подпапке приложения. Итак, чтобы «экспортировать» сайт «производства» (учитывая, что у au cli нет команд для этого), можно просто скопировать папку проекта без подпапки node_modules, а затем просто просмотреть index.html из копии в браузере - и все должно работать. Фактически, это работало для меня, пока я не попытался использовать компоненты интерфейса Kendo.
Приведенный ниже сценарий в основном создает проект в /tmp/testsplit, строит его au build, копирует в папку проекта без node_modules/ к /tmp/testsplit-export, а затем запускает в исходной папке проекта au run --watch.Когда я осматриваю http://localhost:9000/ или file:///tmp/testsplit/index.html, все хорошо, - но когда я осматриваю file:///tmp/testsplit-export/index.html, ничего не оказывается, и Firefox журнала консоли говорит мне:
...
DEBUG [templating] importing resources for mainpage.html <unavailable> vendor-bundle.js:13938
ERROR [app-router] <unavailable> vendor-bundle.js:13968
ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored. vendor-bundle.js:13968
Мои версии являются:
$ node --version
v4.2.6
$ npm --version
2.14.12
$ npm show aurelia-framework version
1.0.8
$ npm show aurelia-cli version
0.23.0
Вот bash сценарий:
#!/usr/bin/env bash
# uses `expect` and `rsync`: sudo apt-get install expect rsync
set -x
cd /tmp
REINSTALL=true # comment this var assignment to not recreate the project
if [ "$REINSTALL" == "true" ] ; then
rm -rf /tmp/testsplit
# npm install aurelia-cli -g # so we have `au` command
# `au new` also creates new dir
# note `au new --here` asks different questions!
# wout --here: 1. Default ESNext (Default)
# with --here: 1. Yes (Default) Would you like to create this project?
#~ echo -r "1\r1\r" | au new testsplit # NOWORK, must use `expect`
expect -c '
set timeout -1
proc abort {} {
puts "Timeout or EOF\n"
exit 1
}
spawn au new testsplit
expect {
"\\\[Default ESNext\\\]>" { send "1\r" ; }
default abort
}
expect {
"\\\[Yes\\\]>" { send "1\r"; }
default abort
}
# note: the next q is the "Would you like to install the project dependencies?"
# it downloads into node_modules (182MB), and may take a while
expect {
"\\\[Yes\\\]>" { send "1\r"; }
default abort
}
expect eof
catch wait result
puts "Finished OK\n"
'
fi
cd /tmp/testsplit
if [ "$REINSTALL" == "true" ] ; then
npm install jquery kendo-ui-core aurelia-kendoui-bridge --save
fi
{ set +x ; } 2>/dev/null
function setfilename { FILENAME="$1"; echo $FILENAME; }
if [ "$REINSTALL" == "true" ] ; then
echo " Patching files:"
export LOOKFOR="" REPLACER=""
setfilename "aurelia_project/aurelia.json" ;
IFS='' read -r -d '' REPLACER <<'EOF'
"jquery",
{
"name": "kendo-ui-core",
"path": "../node_modules/kendo-ui-core/js/",
"main": "kendo.ui.core"
},
{
"name": "aurelia-kendoui-bridge",
"path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
"main": "index"
},
EOF
IFS='' read -r -d '' LOOKFOR <<'EOF'
"aurelia-templating-binding",
EOF
perl -pi -e 's/($ENV{"LOOKFOR"})/$1$ENV{"REPLACER"}/' "$FILENAME"
setfilename "src/main.js" ;
IFS='' read -r -d '' LOOKFOR <<'EOF'
.feature('resources');
EOF
IFS='' read -r -d '' REPLACER <<'EOF'
.feature('resources')
// .plugin('aurelia-kendoui-bridge', kendo => kendo.core());
.plugin('aurelia-kendoui-bridge');
EOF
perl -pi -e 's/(\Q$ENV{"LOOKFOR"}\E)/$ENV{"REPLACER"}/' "$FILENAME"
fi
echo " Adding files:"
setfilename "src/app.html" ; cat > "$FILENAME" << 'EOF'
<template>
<div>Test App</div>
<div id="container">
<router-view></router-view>
</div>
</template>
EOF
setfilename "src/app.js" ; cat > "$FILENAME" << 'EOF'
export class App {
configureRouter(config, router){
config.title = 'Test App Title';
config.map([
{ route: ['','mainpage'], name: 'mainpage', moduleId: './mainpage', nav: true, title:'Main Page' },
]);
this.router = router;
}
}
EOF
setfilename "src/mainpage.html" ; cat > "$FILENAME" << 'EOF'
<template>
<require from="./mainpage.css"></require>
<require from="aurelia-kendoui-bridge/splitter/splitter"></require>
<!-- these two css must be present, else the drag handles are styled/positioned wrong! -->
<require from="../node_modules/kendo-ui-core/css/web/kendo.common.core.min.css"></require>
<require from="../node_modules/kendo-ui-core/css/web/kendo.default.min.css"></require>
<div>(see also: http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/splitter-basic-use)</div>
<div class="splitpane-holder" ak-splitter="k-orientation: horizontal;">
<div class="pane-left"></div>
<div class="pane-right"></div>
</div>
</template>
EOF
setfilename "src/mainpage.js" ; cat > "$FILENAME" << 'EOF'
import * as $ from 'jquery';
//// both of these names seem to work the same:
// import {Splitter} from 'kendo-ui-core';
import {kendoSplitter} from 'kendo-ui-core';
export class Mainpage {
}
EOF
setfilename "src/mainpage.css" ; cat > "$FILENAME" << 'EOF'
html, body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.splitpane-holder {
height: calc(100% - 6em);
width: calc(100% - 2em);
position: relative;
}
.pane-left, .pane-right { height: 100%; }
.pane-left { background-color: #AAA; }
.pane-right { background-color: #888; }
EOF
au build
rm -rf /tmp/testsplit-export
# add /. at end of source folder in rsync so hidden files are copied, else source will be copied as a folder inside destination
rsync -av /tmp/testsplit/. /tmp/testsplit-export --exclude node_modules
echo -e "Exported /tmp/testsplit-export/index.html\n"
au run --watch