I am using ember liquid-teather - http://pzuraq.github.io/liquid-tether/#/examples?a=animation-with-context
The code I have used is from the example under 'Animation With Context'.
The modal works, but there is no nice transitions as am getting an error in the console re the transitions.js file.
See my transitions code below:
export default function(){
this.transition(
target('modal-dialog'),
this.toValue(({ index: newIndex }, { index: oldIndex }) => newIndex > oldIndex),
this.use('tether', ['to-left', options]),
this.reverse('tether', ['to-right', options])
);
this.transition(
target('modal-dialog'),
this.toValue(({ index }) => index === 1),
this.use('tether', 'fade', 'fade')
);
this.transition(
target('modal-dialog'),
this.toValue(({ index }) => !index),
this.use('tether', 'fade', 'fade')
);
}
The error is: target not defined.
How do I define target?
Thank you in advance! :-)
You can check here what values are allowed for options.
http://tether.io/
Search under options :).
scratch that! I have solved my own question. I just needed to declare this at the top of the transitions.js file.
import { target } from 'liquid-tether';
But now the issue I am getting is 'options not define'. ...Any ideas anyone?
options not defined refers to the options you are passing to your animation. It is not very clear from the docs but it is expecting an options hash here. For example:
this.use('tether', ['to-left', {duration: 500}]),
Check the liquid fire site for all the options available for animations
Related
I'm developing ember tests and I want to check if error messages are correctly displayed.
For that I need to check a specific checkbox (or groups of checkboxes) from a list.
Is there a way to specify which checkboxes we want?
Maybe using some kind of parameter that we can pass to choose which we want to select?
Thanks
I figure out how to solve it. I used a collection to identify the elements.
Thanks all for your help!
//products.js
export default create({
main: {
scope: '#main',
allProducts: collection({
itemScope: '.products-list',
item: {
name: text('.card-h1'),
click: clickable('.card-h1'),
color: text('.product-color'),
quantity: text('.product-quantity'),
},
}),
}
});
// products-test.js
function getSingleProduct(name) {
return products.main.allProducts()
.filter(p => p.name.trim() === name).get(0);
}
assert.equal(product.color, 'red');
assert.equal(product.quantity, 10);
I am using Ionic 2 rc4. I am following the advise here and am trying to do the following:
import { NavController } from 'ionic-angular';
...
this.nav.present(this.loading).then(() => {
However, to me it looks like the NavController does not have a present function, because I get:
[ts] Property 'present' does not exist on type 'NavController'.
any
Am I correct, or am I doing something wrong? How do they get to access this "phantom" function?
Any advise appreciated.
UPDATE
Here is my code that results in the following error (on this.loading.present().then(() => {):
"Cannot read property 'nativeElement' of null"
It presents loading the first time. but after the alert is presented if submit() is run again, it gets this error.
submit() {
this.loading.present().then(() => {
let alert = this.alertCtrl.create({
title: 'Verify Email',
subTitle: 'Please verify your email address before you log in.',
message: 'Check your Spam folder if you cannot find the email.',
buttons: [
{
text: 'Resend',
handler: data => {
firebaseUser.sendEmailVerification().then((data) => {
this.doAlert('Verify Email', 'Verification Email Sent.').then((data) => {
//navCtrl.setRoot(navCtrl.getActive());
});
});
}
},
{
text: 'Okay',
handler: data => {
//navCtrl.setRoot(navCtrl.getActive());
}
}
]
});
alert.present();
this.loading.dismiss();
});
}
Looking at this changelog for Beta 11
They have removed present function from Navcontroller.
You need to refactor your code and use some other function based on your requirement.
this.loading.present()
For the error, check the Loading controller docs.
Note that after the component is dismissed, it will not be usable
anymore and another one must be created. This can be avoided by
wrapping the creation and presentation of the component in a reusable
function
Just do :
this.loading = this.loadingCtrl.create({
//loading properties
});
inside submit() before this.loading.present()
I have the following model setup:
deliveryMethods: DS.hasMany("delivery-method", { async: true })
With this computed property:
### COMPUTED PROPERTIES ###
formattedDeliveryOptions: (->
#get('deliveryMethods').map((dm) ->
console.log dm.toJSON()
return { key: dm.get('name').underscore, value: dm.get('name') }
)
).property("deliveryMethods.#each")
And I am trying to access this property in a controller like so:
deliveryMethodsArray: (->
org = #get('controllers.application.currentOrganization')
console.log org.get('formattedDeliveryOptions')
return org.get('formattedDeliveryOptions')
).property()
But when the console.log dm.toJSON() runs, the organization property is set but nothing else. Not sure what I am doing wrong
console.log output:
Because the async is true, i believe you need to do a then() on the get promise.
org.get('formattedDeliveryOptions').then((fmtOpts) => { /* do something*/ });
Please excuse my syntax, you use a slightly different shorthand version than i do. The concept should be the same though.
I have an object
let StatusDescriptions = {
'A' : 'Available' ,
'W' : 'Waitlisted' ,
'C' : 'Closed'
};
which is available in the page. And I use handlebars to display the page. Can I use this object in a select-2 tag as such? I tried giving optionValuePath as 'key' 'id' etc, which I know is silly. I'm new to Ember as well. Please help.
{{select-2 id="myID" content=StatusDescriptions optionLabelPath="what should be here" placeholder='Choose Status' searchEnabled=false}}
Update: if you already installed Select 2 Ember addon... (if not, instruction below)
Your object should look like this:
statusDescriptions: [
{
id: 'A',
text: 'Available'
},
{
id: 'W',
text: 'Waitlisted'
},
{
id: 'C',
text: 'Closed'
}
]
So you can have this in your handlebar:
{{select-2
content=statusDescriptions
id=id
value=selectedChoice
searchEnabled=false
}}
In your handlebar or in your controller, you can observe or use in computed property the selectedChoice property. (This could be in your handlebar file:)
Selected: {{selectedChoice.id}} - {{selectedChoice.text}}
Update2: If you really want to use a simple object, you can convert it with a computed property. For example, this could be in your controller:
import Ember from 'ember';
export default Ember.Controller.extend({
statusDescriptions: {
'A' : 'Available',
'W' : 'Waitlisted',
'C' : 'Closed'
},
statusForSelect: Ember.computed('statusDescriptions', function() {
const statusDescriptions = this.get('statusDescriptions');
return Object.keys(statusDescriptions).map(key =>
Object.create({id: key, text: statusDescriptions[key]})
);
})
});
So in your template, you can use statusForSelect as content.
{{select-2
content=statusForSelect
id=id
value=selectedChoice
searchEnabled=false
}}
If you haven't installed Select 2 addon yet:
Yes, you can use Select 2 in Ember project, but you have to install a specific Ember addon. Most of your favourite javascript library are already ported to Ember, you can look around here: http://www.emberobserver.com
You can find here a list about Select addons: https://www.emberobserver.com/categories/select
As you see, there is an ember-select-2 addon. In your project folder run:
ember install ember-select-2
and follow the instructions if you would like to use this package: https://github.com/iStefo/ember-select-2
However, there are more up-to-date select packages, you can try them out. One of the most popular is: http://www.ember-power-select.com/
For simple routes I know I can user where statement. But what about parameters in Route::group() prefix
<?php
Route::get('user/{id}', 'UserController#profile')->where('id', '[0-9]+');
Route::group(['prefix' => 'foo/{bar}'], function() {
// ...
})->where('bar', '[0-9a-Z]+'); // this won't work
I'm using laravel 5.5. I had same problem and find this question in search.
I've tried to use the solution defined by #lukasgeiter and faced a problem:
The value of
$group->getRoutes()
was not only the routes of current group.
But I fixed my problem by specifying condition in route group definition.
Route::group([
'prefix' => 'foo/{bar}',
'where' => ['bar' => '[0-9a-Z]+']
],
function() {
// ...
});
And it worked for me :)
Out of the box the laravel router doesn't support this. You can use the Enhanced Router package from Jason Lewis or a fork that enables support for Laravel 4.2
Alternatively you can do it yourself. You could basically add the where condition to every route inside the group:
Route::group(['prefix' => 'foo/{bar}'], function() {
Route::get('/', function(){
// ...
})->where('bar', '[0-9a-Z]+');
});
Or do it a bit more dynamic and add this at the bottom of your route group:
Route::group(['prefix' => 'foo/{bar}'], function($group) {
// ...
foreach($group->getRoutes() as $route){
$route->where('bar', '[0-9a-Z]+');
}
});
One of possible not perfect solution in my view will be
// Route Model Binding
Route::model('user', 'User');
// Route Constraint Pattern
Route::pattern('user', '[0-9]+');
// Route Definition
Route::get('anything/{user}', 'UserController#anyFunction');
.
.
Route::resource('user', 'UsersController');