Ember-cli 中的 Polymer 1.0,外观错误
Polymer 1.0 in Ember-cli, wrong appearance
我已经成功地将 Polymer 1.0 集成到我的 Ember-cli 项目中。
这是我的 Brocfile
var vulcanize = require('broccoli-vulcanize');
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
compassOptions: {
sassDir: "app/styles/main",
outputStyle: 'expanded'
}
});
//app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js");
var polymerVulcanize = vulcanize('app', {
input: 'elements.html',
output: 'assets/vulcanized.html',
/* inline: true,
strip: false,*/
excludes: [/*/^data:/, /^http[s]?:/, /^\//*/],
/* stripExcludes: false,
stripComments: false,
inlineScripts: false,*/
inlineCss: true
})
;
var polymer = pickFiles('bower_components/', {
srcDir: '',
files: [
'webcomponentsjs/webcomponents-lite.min.js',
'polymer/polymer.html'
// 'polymer/polymer.js'
],
destDir: '/assets'
});
//Bootstrap
app.import('./bower_components/bootstrap/dist/js/bootstrap.js');
app.import('./bower_components/bootstrap/dist/css/bootstrap.css');
这是我包含所有内容的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Front</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/webcomponentsjs/webcomponents-lite.min.js"></script>
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/front.css">
<script src="assets/vendor.js"></script>
<script src="assets/front.js"></script>
<link rel="import" href="assets/vulcanized.html">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
{{content-for 'body-footer'}}
</body>
</html>
这是我在 index.hbs
中的按钮
<paper-spinner active></paper-spinner>
<paper-button>flat button</paper-button>
<paper-button raised>raised button</paper-button>
我得到的结果是 4/5 次错误渲染按钮 1。
这是它的样子:
和正常:
如果我对论文中的问题-material,但我不知道该怎么做。
有什么想法吗?
上个月我一直在尝试将聚合物 1.0 与 ember 一起使用,结果发现一些用作插入点的聚合物元素无法与 ember 一起使用。
我已经与聚合物核心 member 谈过,他说他们目前正在进行一些互操作以使事情正常进行,但这需要一些时间。
我已经在 emberjs repo(https://github.com/emberjs/ember.js/issues/11361) 上开了一个问题,你也可以关注那里。
尝试将您的代码从 index.hbs
移至 index.html
,这将解决问题,但这些元素在任何路径下都不起作用。
我已经成功地将 Polymer 1.0 集成到我的 Ember-cli 项目中。 这是我的 Brocfile
var vulcanize = require('broccoli-vulcanize');
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
compassOptions: {
sassDir: "app/styles/main",
outputStyle: 'expanded'
}
});
//app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js");
var polymerVulcanize = vulcanize('app', {
input: 'elements.html',
output: 'assets/vulcanized.html',
/* inline: true,
strip: false,*/
excludes: [/*/^data:/, /^http[s]?:/, /^\//*/],
/* stripExcludes: false,
stripComments: false,
inlineScripts: false,*/
inlineCss: true
})
;
var polymer = pickFiles('bower_components/', {
srcDir: '',
files: [
'webcomponentsjs/webcomponents-lite.min.js',
'polymer/polymer.html'
// 'polymer/polymer.js'
],
destDir: '/assets'
});
//Bootstrap
app.import('./bower_components/bootstrap/dist/js/bootstrap.js');
app.import('./bower_components/bootstrap/dist/css/bootstrap.css');
这是我包含所有内容的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Front</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/webcomponentsjs/webcomponents-lite.min.js"></script>
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/front.css">
<script src="assets/vendor.js"></script>
<script src="assets/front.js"></script>
<link rel="import" href="assets/vulcanized.html">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
{{content-for 'body-footer'}}
</body>
</html>
这是我在 index.hbs
中的按钮<paper-spinner active></paper-spinner>
<paper-button>flat button</paper-button>
<paper-button raised>raised button</paper-button>
我得到的结果是 4/5 次错误渲染按钮 1。
这是它的样子:
和正常:
如果我对论文中的问题-material,但我不知道该怎么做。
有什么想法吗?
上个月我一直在尝试将聚合物 1.0 与 ember 一起使用,结果发现一些用作插入点的聚合物元素无法与 ember 一起使用。
我已经与聚合物核心 member 谈过,他说他们目前正在进行一些互操作以使事情正常进行,但这需要一些时间。
我已经在 emberjs repo(https://github.com/emberjs/ember.js/issues/11361) 上开了一个问题,你也可以关注那里。
尝试将您的代码从 index.hbs
移至 index.html
,这将解决问题,但这些元素在任何路径下都不起作用。