I am using ember-bootstrap's Navbar example code in a simple Ember test app:
{{#bs-navbar as |navbar|}}
<div class="navbar-header">
{{navbar.toggle}}
<a class="navbar-brand" href="#">Brand</a>
</div>
{{#navbar.content}}
{{#navbar.nav as |nav|}}
{{#nav.item}}
{{#nav.link-to "home"}}Home{{/nav.link-to}}
{{/nav.item}}
{{#nav.item}}
{{#nav.link-to "navbars"}}Navbars{{/nav.link-to}}
{{/nav.item}}
{{/navbar.nav}}
{{/navbar.content}}
{{/bs-navbar}}
However I'm having strange results; the navbar is showing up 12 times in my page. For what it's worth, the toggle button doesn't do anything either - but that might be connected to the reason the navbar appears 12 times. See the following screenshot:
Here are the steps I took to set up this project:
ember new bootstrap-test
Inside /bootstrap-test:
ember install ember-bootstrap
ember g ember-bootstrap --bootstrap-version=4
Here is the contents of my ember-cli-build.js file:
/* eslint-env node */
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
'ember-bootstrap': {
'bootstrapVersion': 4,
'importBootstrapFont': false,
'importBootstrapCSS': false
}
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree();
};
Finally, I'm using ember-cli version 2.14.2. Any help to figure this out would be greatly appreciated. Thank you!
It might be caused by re-rendering due to property update in didRender or didInsertElement hook. If that's the case then you surely you will get assertion error in console.
I always look for the first error, if there is more no of errors reported in the console. that helped me a lot in my development.
Related
I am using Ember-leaflet for my ember application. I followed every step from installation to usage but somehow it is not showing anything.
I inspected the elements and found property overflow:hidden. I changed to overflow:visible then map was showing but on zooming in and out, image expands awkwardly.
I am using in my template.hbs
{{#leaflet-map lat=lat lng=lng zoom=zoom}}
{{tile-layer url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}
{{/leaflet-map}}
and in my template.js
export default Ember.Controller.extend({
lat: 45.519743,
lng: -122.680522,
zoom: 10
});
reference used from http://www.ember-leaflet.com . Do I required to import or include any CSS or JS file. Any help?
Using this helped me
.leaflet-container{
height:300px;
}
Raised issue and got the reply:
https://github.com/miguelcobain/ember-leaflet/issues/139
I'm evaluating Ember.js for possible use in an upcoming project. I want to see now it fares with a long list of items, so I tried to installed the ember-list-view.
I ran the command:
ember install:addon ember-list-view
The syntax seems to have changed, so I ran
ember install ember-list-view
That activates npm, which downloaded the package successfully. I can see it in node_modules. Then per the documentation I created the following:
templates/test.hbs:
{{#view 'list-view' items=model height=500 rowHeight=50 width=500}}
{{name}}
{{/view}}
routes/test.js
import Ember from 'ember';
// define index route and return some data from model
export default Ember.Route.extend({
model: function() {
var items = [];
for (var i = 0; i < 10000; i++) {
items.push({name: "Item " + i});
}
return items;
}
});
I added the route in router.js. When I go to the page, nothing shows up. According to Ember Inspector, the right template was being used and the data was there. A check on Ember.ListView in the console yield undefined.
Is there something more that needs to be done to bring in the code? Searches in the Ember and Ember-CLI documentation yielded no answer.
It looks like a problem with the list-view documentation.
There are two issues here:
The {{view}} helper is not a block helper (as far as I know. FYI a block helper is a helper that begins with {{#some-key-word}} and ends with {{/some-key-word}}) - You can't wrap content in it and have that content displayed in the view.
The list-view expects the property content not items
When you change the code to the following:
{{view 'list-view' content=model height=500 rowHeight=50 width=500}}
It works a little bit better (e.g. you can inspect the page and see item views being created) - but still not what you're expecting.
When you change the view keyword to the ember-list keyword (which ember-list-view registers as a helper) - everything works.
{{#ember-list items=model height=500 rowHeight=50 width=500}}
{{name}}
{{/ember-list}}
I have a hard time to configure Ember CLI to use uncss. The setup:
> ember new foobar
> cd foobar
> bower install --save-dev bootstrap
> ember generate route index
app/templates/index.hbs
<h1>Hello World!</h1>
Brocfile.js
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
app.import('vendor/bootstrap/dist/css/bootstrap.css');
module.exports = app.toTree();
What do I have to do to use https://github.com/sindresorhus/broccoli-uncss? The assets part of http://iamstef.net/ember-cli/ says that it's easy but it doesn't describe how to actually do it.
It's not well documented in broccoli-uncss readme, but if you look at the
index.js and test.js, you would get the idea.
Basically you pass in a tree as the first parameter, and an options hash as the second parameter, And options hash should have an html option, telling where the index.html is. In your case I think what Oliver said is true. You could use the html in your dist folder. I am not sure how to integrate that with the ember-cli, but my guess is probably you need an ember-cli add-on, http://reefpoints.dockyard.com/2014/06/24/introducing_ember_cli_addons.html.
var uncss = require('broccoli-uncss');
var cssTree = uncss('dist`, {
// html file to uncss, or this could be a live link to the html
html: ['dist/index.html']
});
// you might somewhat merge this with ember-cli app tree here.
module.exports = cssTree;
Please correct me if I'm wrong...
I assume uncss won't work as expected in a "templating environment"!
Let's say you have an outer and an inner template. The outer looks like
<div class="outer">
{{outlet}}
</div>
and the inner template would look like
<h1>Text</h1>
In your css file you would maybe write something like
.outer h1 {
background: red;
}
As far as I know uncss would dismiss this css rule because uncss is not able to find it in either one of your templates.
I try to integrate the Minicolor JQuery component in Ember.js application.
Integration should be easy but it does not work for me... (input is displayed but without JQuery component)...
Minicolor integration guide:
https://github.com/claviska/jquery-miniColors
From doc: simply insert the js file and add the following input:
My js file:
App.ColorPicker = Em.TextField.extend({
type: 'minicolors',
attributeBindings: ['name'],
willInsertElement: function() {
;
}
});
The html file
{{view App.ColorPicker placeholder="Background color" name="color" valueBinding="App.MyController.backgroundColor"}}
I believe your issue is that ember is dynamically adding the <input type='minicolors' ... /> element after the initialization code for minicolors has already executed, causing your new minicolors input to not be initialized.
I got your example working by using the didInsertElement event instead of willInsertElement event to force minicolors to create the dynamically added App.ColorPicker element. The willInsertElement fires when the element is going to be inserted, but hasn't yet, and the didInsertElement will fire after the element has been inserted. I used the latest files from the minicolors github repository.
App.ColorPicker = Em.TextField.extend({
type: 'minicolors',
attributeBindings: ['name'],
didInsertElement: function() {
$.minicolors.init();
}
});
The only other issue I had was needing to make sure the css file and the png with the color picker graphical elements could be loaded. Apparently if the css and png files are not loadable the js portion doesn't work.
I have a view where there can be a large number of items for the user to scroll through and I'd like to implement infinite scrolling to enable progressive loading of the content.
It looks like some folks have done pagination but Google doesn't bring up anyone discussing how they've done infinite lists with Ember/Ember Data. Anyone already worked through this and have a blog post/example code to share?
I've implemented an infinite scroll mechanism at the GitHub Dashboard project, I'm currently developing. The feature is added in commit 68d1728.
The basic idea is to have a LoadMoreView which invokes the loadMore method on the controller every time the view is visible on the current viewport. I'm using the jQuery plugin inview for this. It allows you to register for an inview event, which is fired when the element of the specified selector is visible on screen and when it disappears.
The controller also has properties which indicate whether there are more items to load and if there are currently items fetched. These properties are called canLoadMore and isLoading.
The LoadMoreView basically looks like this:
App.LoadMoreView = Ember.View.extend({
templateName: 'loadMore',
didInsertElement: function() {
var view = this;
this.$().bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) Ember.tryInvoke(view.get('controller'), 'loadMore');
});
}
});
where the loadMore template is defined as follows:
{{#if isLoading}}
fetching some more stuff <img width="10" src="img/ajax-loader.gif" >
{{else}}
{{#if canLoadMore}}
<a {{action "loadMore" target="controller" }}>click to load more items</a>
{{else}}
<i>no more items</i>
{{/if}}
{{/if}}
The controller which handles the fetching of more items is then implemented as follows. Note that in the loadMore method a query on the store is performed, which loads a specific page of of entries for a model.
App.EventsController = Ember.ArrayController.extend({
currentPage: 1,
canLoadMore: function() {
// can we load more entries? In this example only 10 pages are possible to fetch ...
return this.get('currentPage') < 10;
}.property('currentPage'),
loadMore: function() {
if (this.get('canLoadMore')) {
this.set('isLoading', true);
var page = this.incrementProperty('currentPage');
// findQuery triggers somehing like /events?page=6 and this
// will load more models of type App.Event into the store
this.get('store').findQuery(App.Event, { page: page });
} else {
this.set('isLoading', false);
}
}
});
The only thing left is to initially set the content of the controller to the result of a filter function, so the content is updated when new models are loaded into the store (which happens due to the findQuery method in the loadMore of the controller). Also, a query hash is added when the filter is invoked. This ensures that an initial query to the server is made.
App.eventsController = App.EventsController.create({
content: []
});
var events = App.store.filter(App.Event, { page: 1 }, function(data) {
// show all events; return false if a specific model - for example a specific
// type of event - shall not be included
return true;
});
Were you aware of the newly released Ember.ListView component?
https://github.com/emberjs/list-view
It was announced at the February San Francisco Ember Meetup. Here's a slidedeck from Erik Bryn, one of the Ember Core developers about using it:
http://talks.erikbryn.com/ember-list-view/
I'm writing an infinite pagination plugin for Ember based on #pangratz's work.
Please fire any issues on there if you have questions or improvements that you'd like.
I would recommend using Ember Infinity addon. It supports Ember 1.10 through to 2.0+. It's relatively easy to setup. You only need to modify your route and template.
Route (Product is example model):
import InfinityRoute from 'ember-infinity/mixins/route';
export default Ember.Route.extend(InfinityRoute, {
model() {
/* Load pages of the Product Model, starting from page 1, in groups of 12. */
return this.infinityModel('product', { perPage: 12, startingPage: 1 });
}
});
Template:
{{#each model as |product|}}
...
{{/each}}
{{infinity-loader infinityModel=model}}
When {{infinity-loader}} component becomes visible it sends an action to your route, so it knows to update model array with new (fetched) records.
First request will be sent to:
/products?per_page=12&page=1
So you also need to prepare your backend API to handle these query params. It's obviously customizable, take a look at Advanced Usage section of Readme.
Note:
Both using ListView (#commadelimited's answer) and views with ArrayController (#pangratz's answer) is deprecated/removed as of Ember 2.0 being stable version.