I'm trying out Ember.js for the first time by roughly following the Ember.js guide, but I'm running into the following problem.
Relevant code:
https://gist.github.com/3257657 (for complete rails app, see: https://github.com/basveeling/ember-test)
Context:
I'm running the latest ember-rails build with the 1.0 prerelease ember.js. I'm using ember-data for the post model.
Almost everything works in this app, except that the hrefs created by {{action showPost context="post" href=true}} have an undefined id (#/posts/undefined).
Furthermore, the jQuery event passed to the showPost action doesn't have a context property (it does have a view property).
Am I going at this the wrong way, or have I perhaps stumbled on a bug in the prerelease?
edit: this might be related to Url contains 'undefined' instead of id after navigating back from 'edit' to 'show'
Try change {{action showPost context="post" href=true}} to {{action showPost post href=true}}
The 1.0 prerelease has changed the action helper.
More info: https://github.com/emberjs/ember.js/commit/83b7a61a892e55423cf1e66f606b13435bcab8f0
Related
I am newbie in ember. In this ember app, the legacy code displays Images, but I want to add some videos between the images.
My test code is given as below, here simply replace the image with video.
{{!-- Carousel --}}
{{#bs-carousel
class=(concat "carousel" (if imagesLoading ' invisible height-none'))
autoPlay=false
interval=0
wrap=true
model=imageCaptures
showControls=showControls
showIndicators=showIndicators
index=activeImage
as |caro|}}
{{#each imageCaptures as |slide|}}
{{#caro.slide}}
{{!-- <img alt='' src='{{slide.image_url}}'> --}}
<video>
<source src='{{slide.image_url}} type="video/mp4"'>
</video>
{{/caro.slide}}
{{/each}}
{{/bs-carousel}}
Video is shown, but it is cut, not auto scaled in the div where the image was shown.
Can you tell me how to display video in Carousel?
ember-carousel
An ember addon for Carousel component
DEMO
Usage
From within your Ember CLI application, run the following:
ember install ember-carousel
Add invoke the component as follows
{{#carousel-container transitionInterval=400 as |ui controls|}}
<div class="carousel-body">
{{#ui.item}}
Emberjs
{{/ui.item}}
{{#ui.item}}
Reactjs
{{/ui.item}}
{{#ui.item}}
Angularjs
{{/ui.item}}
</div>
<button onclick={{controls.previous}}>
Slide Left
</button>
<button onclick={{controls.next}}>
Slide Right
</button>
{{/carousel-container}}
API
{{carousel-container}}
This is the primary component to start displaying carousel items.
Attributes
transitionInterval - Defaults to 500.
onSlide - Optional, an action that receives one parameter, an object like { index: 3, previousIndex: 2, direction: 'right' }.
Triggered before the transition is completed.
Yielded Params
This component yields two hashes, e.g. {{#carousel-container as |ui act|}}.
These parameters ui and act can be called anything, but they contain the following items:
ui - is a hash with the following component items:
item - A component that should contain your slide contents, used like so {{ui.item}}you content{{/ui.item}}.
controls - is a hash with the following action items:
previous - A closure action that changes to the previous slide.
next - A closure action that changes to the next slide.
Development
git clone this repository
npm install
bower install
Running
ember server
Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
SOURCE:https://github.com/selvagsz/ember-carousel#readme
I am using rails 4 with emberjs. I have an array of users that I get from the server. I need to display the last object on the UI. Also, the user can add new users to the array but only the last/latest-added user should be visible.
My ember version details are as
Ember : 1.7.0-beta.1
Ember Data : 1.0.0-beta.8.2a68c63a
Handlebars : 1.3.0
jQuery : 1.11.1
My current handlebars code is as. After adding the new user to users array, the new user details is displayed.
{{each users}}
//display all the users here.
{{/each}}
What i want is something like this
{{#each users}}
{{#if #last}}
//display user details
{{/if}}
{{/each}}
I tried adding a property in the associated controller and removed the 'each' loop. I displayed the lastUser details which works. But if I add a new user, the UI still displays
the previous user details.
lastUser: (->
return #model.users.get('lastObject')
).property('#model.users')
How can this be acheived? Thanks.
You can simply use the following:
{{users.lastObject.firstName}}
{{users.lastObject.lastName}}
or more cleanly:
{{#with users.lastObject}}
{{firstName}}
{{lastName}}
{{/with}}
With just redefines this within the block to the object provided--in this case the users.lastObject object. Your lastUser computed property is unnecessary because Ember enumerables already provide this for free!
To watch additions to the users array, you need to watch the 'users.#each'
See the following documentation http://emberjs.com/guides/object-model/computed-properties-and-aggregate-data/
Hi i am very new to ember js. i pass action parameters(id ) on link-to action in template but i did not get the values in my controller.
My Template code as follows:
index.html:
<script type="text/x-handlebars" data-template-name="search">
{{#each model.results}}
// here i pass id value along with action
{{#link-to 'profile' id action="profileinfo"}}
</script>
app.js:
App.SearchController = Ember.ObjectController.extend({
id: '',
actions:{
profileinfo: function(id){
// Here i access id value like this
console.log(id);
var id = this.get('id');})
when i click on the link action goes to Searchcontroller, but i get id value is empty.I follow some solutions in stack overflow but unfortunately i did not get anything. Please provide some solution
I don't get why you're using the {{#link-to}} helper for triggering an action on your controller. Maybe you could simply use the {{action}} helper ?
If you try doing it that way, would it work ?
<button type="button" {{action "profileinfo" id}}>Click me !</button>
From there, your console.log(id); should get your value.
EDIT
Would also work for a <a> tag
<a href="#" {{action "profileinfo" id}}>Click me !</a>
I've created popular addon for doing just that:
{{#link-to 'profile' id invokeAction='profileinfo'}}
Simply install it:
ember installember-link-action
Please leave a star if you enjoy it or leave feedback if you feel anything is missing. :) It works with Ember 1.13 and 2.X (tested on Travis CI).
I've got my application.hbs template where I declare several {{outlet}}s (named & unnamed) and one with specified viewClass property:
application.hbs:
{{outlet 'modal'}}
{{outlet 'notification'}}
<h1>EAK Application</h1>
{{#view 'application/content'}}
{{!some HTML markup, etc. }}
{{outlet viewClass='application/content-container'}}
{{/view}}
and my view files are placed under
app/views/application/content.js
app/views/application/content-container.js
But Ember App Kit cannot find the content-container view!
Uncaught Error: Assertion Failed: Unable to find view at path
'views/application/content-container'
Am I doing something wrong?
Edit
Meanwhile I do the simple workaround and call it like
{{#view 'application/content-container'}}
{{outlet}}
{{/view}}
but this gives my an extra <div> layer and is "less elegant" imho...
The current Ember API reference (http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_outlet) says the property on the outlet should be view not viewClass:
{{#view 'application/content'}}
{{!some HTML markup, etc. }}
{{outlet view='application/content-container'}}
{{/view}}
Without a full understanding of the app your building, I can't make a specific recommendation, but if you want to take advantage of the deep linking URLs, you should use routes when possible to assign templates/views to outlets.
For example your IndexRoute will expect an IndexTemplate and an IndexView (or will create one behind the scenes). In the Ember App Kit they would be located in app/views/index.js and app/templates/index.hbs. Check out the Rendering a Template guide on Ember's site: http://emberjs.com/guides/routing/rendering-a-template/
Alternatively you could also use the view helper like:
{{view 'my-view'}}
The is different than the normal Ember view helper where the view helper expects the actual class. In the Ember App Kit, it's the path to the file based on the file name and path of the view from the app/views root.
The following code works fine in chrome i have an observable property in the controller
{{view Ember.Select prompt="--ANY--"
selectionBinding="GWVideoApp.VideosController.category"
contentBinding="GWVideoApp.TagsController.categories"
optionLabelPath="content.title"
optionValuePath="content.title"}}
Controller:
category: {},
categoryDidChange: function() { this.recalcTags(); }.observes('category'),
But it seems like the update isn't happening for IE8
had the same problem with Ember.Checkbox valueBinding.
Upgrading of jQuery from 1.6.4 to 1.7.2 has fixed this problem