aurelia-cli项目的Kendo UI分割器：高度％，捆绑导出？

时间：2016-12-17 23:13:08

标签： css bundle aurelia aurelia-cli

我正在尝试在Aurelia JS项目中使用Kendo UI Splitter小部件，该小部件是通过aurelia-cli（au程序）启动的。

为了有一个可重复的示例，我在下面添加了一个bash脚本，它使用au来启动一个新项目（因为au new只是交互式的，并且没有选项可以在批处理模式下指定，我必须在脚本中使用expect来自动化它，然后添加相关的源文件，最后构建和导出它。这是我的问题：

  • 无论我做什么，水平分割的高度设置为300px;我想把它的高度设定为父母的百分比 - 我该怎么做？
  • 当我“导出”“生产”“捆绑”网站时，它无法加载 - 它失败;它仅适用于au run上的http://localhost:9000。如何“导出”正确的“捆绑”网站？

关于尺寸/身高问题 - 这是我通过index.html / au run查看localhost:9000后得到的结果：

aur-ff.png

请注意，我在我的CSS类中用于左窗格div元素的height设置被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 hub 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中的每个所需依赖项都会在应用程序的scripts/子文件夹中的两个.js文件中“编译”。因此，为了“导出”“生产”站点（假设au cli没有命令执行此操作），可以只复制项目文件夹而不使用其node_modules子文件夹，然后只需查看来自浏览器中副本的index.html - 一切都应该有效。事实上，这对我有用，直到我尝试使用Kendo UI组件。

下面的脚本基本上在/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

2 个答案:

答案 0 :(得分：1)

此代码适用于所有浏览器，将'splitpane-holder'替换为'horizo​​ntal'？

<div id="horizontal"  role="horizontal" style="height: 100%;">

... 

<style>
html, 
body {height:100%; padding:0; margin:0;}
body {display:flex; flex-direction:column;}
#horizontal {flex-grow:1;}

答案 1 :(得分：0)

好吧，我仍然没有解决造型（高度％）的问题，所以我仍然希望有人可以帮助我;但是，我想我可能已经解决了捆绑问题。诀窍似乎是：

  • 在aurelia.json
    • 的供应商包中添加所需的.css文件作为资源
  • 对import
    • 中组件的aurelia-kendoui-bridge版本使用其他mainpage.js语句

我发现了从How to import packages within my Aurelia application中包含nprogress的示例中添加资源的问题。我从这里得到了import诀窍（通过improve webpack kendo-core config · Issue #588 · aurelia-ui-toolkits/aurelia-kendoui-bridge · GitHub）：

https://gitter.im/adriatic/Aurelia-KendoUI?at=57a0fdf50bd017c16e36424e

  

@ len-ro我对aurelia-cli的体验非常有限，但它可能会跟踪你的javascript文件的导入，以查看包含在哪些文件中。由于它不会提取标签，只需导入标签，您可以尝试使用import＆＃39; aurelia-kendoui-bridge / dropdownlist / dropdownlist＆＃39 ;;相反，看看是否有任何改变

因此OP bash脚本中相关的更改部分是：

...
setfilename "aurelia_project/aurelia.json" ;
IFS='' read -r -d '' REPLACER <<'EOF'
          "jquery",
          {
            "name": "kendo-ui-core",
            "path": "../node_modules/kendo-ui-core",
            "main": "js/kendo.ui.core",
            "resources": [
              "css/web/kendo.common.core.min.css",
              "css/web/kendo.default.min.css"
            ]
          },
          {
            "name": "aurelia-kendoui-bridge",
            "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
            "main": "index"
          },
EOF
...
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()); // nope, this imports extra wrappers! Can also do kendo => kendo.core().kendoSplitter() ...
    .plugin('aurelia-kendoui-bridge');
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="kendo-ui-core/css/web/kendo.common.core.min.css"></require>
  <require from="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';

//// either of these names seem to work the same:
// import 'kendo-ui-core/js/kendo.splitter';
// import {Splitter} from 'kendo-ui-core';
import {kendoSplitter} from 'kendo-ui-core';

import 'aurelia-kendoui-bridge/splitter/splitter';

export class Mainpage {

}
EOF
...

现在，我可以加载file:///tmp/testsplit-export/index.html，它的工作方式与localhost：9000相同;这意味着将导出理解为没有node_modules的项目文件夹的副本似乎已经足够了。

顺便说一下，请注意.css文件也捆绑在scripts/vendor-bundle.js：

中 
$ grep -Eao '.{34}.kendo.common.core.min.css.{12}.' testsplit/scripts/vendor-bundle.js 
define('text!kendo-ui-core/css/web/kendo.common.core.min.css', ['module']
atey(-100%)}\n/*# sourceMappingURL=kendo.common.core.min.css.map */\n"; }
相关问题
最新问题