10

I am trying out ember-cli to get an ember project going, however I have previously relied on rails and the asset pipeline to compile all my js and (s)css for previous projects.

I admit a weak understanding of js build tools, so apologies if the question is basic: How can I see what dependencies are being compiled/included in the build? Specifically, I want to include both zurb-foundation and ember-leaflet in my project. I am not sure if they are there (at least the leaflet map is not showing up in the project --- using a basic example that worked with both rails and rail-eak).

The files (ember-leaflet, etc) are in the vendor directory of the project and were placed there thru bower install (I assume?); do I have to manually include them in the root bower.json file (currently they are not); is the order in bower.json important?

Thanks in advance.

DJ

4

2 に答える 2

11

掘り下げてたくさん読んだ後、ここで解決策を見つけ、ember-leaflet を機能させました。

1.) ライブラリをダウンロードする

bower install --save leaflet
bower install --save ember-leaflet

注: ember-leaflet にはリーフレットが含まれているように見えるので (leaflet-dist)、リーフレットをダウンロードする必要はおそらくありません。それに応じて変更するだけです。

2.) アセットの構築を構成する

module.exports 行の前にBrocfile.jsにimport 行を追加します。

app.import('vendor/leaflet-dist/leaflet-src.js')
app.import('vendor/leaflet-dist/leaflet.css')
app.import('vendor/ember-leaflet/dist/ember-leaflet.js')

module.exports = app.toTree();

3) Leaflet と EmberLeaflet を Ember に知らせる ( .jshintrc )

{
  "predef": {
    ...
    "L": true,
    "EmberLeaflet": true
  }
  ...
}

4) ビューを作成する

export default EmberLeaflet.MapView.extend({
  classNames : ['ember-leaflet-map']
});

5) ビューを使用してテンプレートを作成します (ここで、ビュー名はファイル名に対応します。ここではviews/mapview.js )

<div id="map">
  {{view 'mapview'}}
</div>

6) app/index.html にベンダー スタイル シートをチェック/追加します (最近のバージョンの ember-cli に存在する必要があります)。

<head>
   ...
   <link rel="stylesheet" href="assets/vendor.css">
</head>

7) Ember を実行する 

ember server

8) おまけ: Twitter Bootstrap 3を使用している場合は、app/styles/app.css に追加する必要のある css を次に示します (おそらく単純化できます)。

html,
body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 20px;
  height: 100%;
}
.page-content {
  padding: 40px 15px;
  height: 100%;
}
.row {
  margin-bottom: 1.5em;
}
#map {
  height: 100%;
}
.ember-leaflet-map {
  height: 100%;
}
body > .ember-view {
  height: 100%;
}
于 2014-05-24T09:57:19.997 に答える
1

誰かが ember-cli アドオンを作成したようです: https://www.npmjs.org/package/ember-cli-ember-leaflet

私はそれを試すつもりです:)

于 2014-07-11T19:00:21.697 に答える