0

I would like to use ember-table in my ember app. I have just installed it via bower. However, it seems that ember requires the various pieces (such as templates, etc) to be in specific directories.

Should I just ln -s these, or is there some way to tell ember to search inside bower_components/ember-table?

UPDATE:

by analogy with ember-table example app, this block seems to mostly give me what I need:

// ember-table w/ requirements
require('bower_components/bootstrap/js/bootstrap.min');
require('bower_components/jquery-mousewheel/jquery.mousewheel.js');
require('bower_components/antiscroll/antiscroll');
require('bower_components/datejs/build/date.js');
require('bower_components/ember-addpar-mixins/resize_handler');
require('bower_components/ember-addepar-mixins/style_bindings');
require('bower_components/ember-table/dist/ember-table');

It turns out that ember-table injects templates into ember, so they don't need to be in templates/components. (NB ember guide on components might want to discuss how to do this...)

More problematic so far for me is disentangling bootstrap from ember-table. (Subquestions: 1) is there a way to convert less to scss as ember-table is less-based? Is there a version of bootstrap that uses a css namespace so that it doesn't make global changes?)

Steve H.
  • 6,912
  • 2
  • 30
  • 49
shaunc
  • 5,317
  • 4
  • 43
  • 58
  • I would suggest using a build tool like grunt to avoid all these kinds of issues altogether. I assume you are using a bower.json and some sort of build tool? http://yeoman.io/ – Steve H. Mar 12 '14 at 21:39
  • I am using grunt... is there a grunt task for installing/configuring ember components? (I am a grunt relative newbie: have never written a grunt task.) – shaunc Mar 12 '14 at 22:10
  • If you have the yeoman suite installed (link in previous comment), then just create an empty folder, cd to it and try `yo ember`. You'll get a scaffold template project already setup for building including minification, testing, bower components, etc.. Move your app to that scaffold, or steal the ideas from it to incorporate in your own. – Steve H. Mar 12 '14 at 22:18
  • In fact, have a project built with yeoman-ember. But afaik my problem concerns getting ember to recognize paths to the files for ember components. How would what you suggest help me? (See the guide: http://emberjs.com/guides/components/defining-a-component/ -- files need to be in particular places. Is there a grunt task for this?) – shaunc Mar 12 '14 at 22:31
  • If you used `generator-ember`, you should have `grunt-neuter` by default. This package will let you use `require` in your main app file to include and concat your js files into a single file. Check out: https://github.com/trek/grunt-neuter – Steve H. Mar 13 '14 at 00:50
  • yes... I'm using that... but WHAT to require? It would seem that ember-table actually monkey-patches in the templates it needs. But it still isn't working for me, despite my cribbing a large section of require( )s from their example app. – shaunc Mar 13 '14 at 05:31

2 Answers2

0

The task for this is grunt-usemin. The useminPrepare task scans the specified HTML file for blocks like this:

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

From there, the files within the blocks will be concatenated and uglified and the references in the destination HTML will be updated to include the processed files. You should put your normal <link> and <script> tags referencing bower_components and everything will work out in the build. When running grunt as a server, the files are served directly from their locations without concatenation and minification.

Steve H.
  • 6,912
  • 2
  • 30
  • 49
  • Steve, you're imparting useful information, but orthogonal to what I need. Although I do need to know more about grunt, what I'm asking for is *what* specifically do I need to include to get an 3rd party ember component to work (in particular ember-table) -- not *how* to include it. In fact by copying steadily from the example app I've started to see something. I think the remaining incompatibilities might be because the rest of my css (based on compass/foundation) is conflicting somehow with bootstrap. – shaunc Mar 13 '14 at 05:46
  • I was responding to your request: "is there some way to tell ember to search inside bower_components/ember-table?" The answer is above. Include the ` – Steve H. Mar 13 '14 at 13:22
  • How to tell *ember* is the key part of my question. Looking at the ember-table source, I see things like: `Ember.TEMPLATES["body-container"] = ` ... which is, in fact, how it seems ember is told, though none of these things are mentioned in the component guide. I think I've mostly got it worked out now, up to the fact that my project is non-bootstrap based. I am trying to figure out how to encapsulate relevant parts of sass-bootstrap without affecting other styling. If you can tell me how to do that I'd be very grateful. – shaunc Mar 13 '14 at 21:40
  • I see, sorry about the confusion. I think this is more a `ember-table` question. I added the tag to your question so maybe someone more familiar with it can answer. I do use sass-bootstrap and it generally works fine combined with my own styling. I do have a problem with the glyphicon fonts tho :( – Steve H. Mar 14 '14 at 03:32
0

With apologies to Steve for confusing question... see:

https://github.com/Addepar/ember-table/issues/109

For future reference, in fact even at first most things were working, but it didn't look like it because css wasn't right. (For one thing, ember tables must be rendered in suitably confined space if you want to see them do their magic scroll trick.)

The example repo mentioned by arzibel: https://github.com/FellowMD/ember-table-scroll-issue I found quite helpful.

shaunc
  • 5,317
  • 4
  • 43
  • 58