Recently i update my existing ember ember project to 2.10.0 version after update i try to run the project but it shows some compile error
uncaught Error: Compile Error: bs-form-element is not a helper
I include this in login page on my project like this
<div class="panel-body">
{{#bs-form formLayout="vertical" model=this action="loginAction" class="form-signin"}}
<fieldset>
{{bs-form-element controlType="text" placeholder="Bank ID" property="userid" value=userid elementId="userid" required="required" autofocus="autofocus" style="text-align:left" maxlength="7"}}
{{bs-form-element controlType="password" placeholder="Password" property="password" value=password elementId="password" required="required" style="text-align:left" maxlength="10"}}
<!--div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div-->
{{bs-button defaultText="Login" class="btn btn-lg btn-primary btn-block" buttonType="submit" }}
</fieldset>
{{/bs-form}}
</div>
I am not sure whether this is plugin related issue or something could some one please help to sort this issue
Ember throws this error if there is no component or helper with the given name found in your project or your dependent addon's.
Check your package.json and the version of ember-bootstrap. I think your app used pre 1.0, because bs-form-element is old api.
Maybe the addon was updated accidentally to >= 1.0, while updating ember.
Another possible oversight to check for, specific to ember-bootstrap and black/white lists, is accidentally including or excluding the needed component from the black/white lists. For example, if you're using a whitelist, make sure the needed component is referenced in it:
// ember-cli-build.js
'ember-bootstrap': {
'whitelist': [
'bs-form'
],
}
Related
Ionic2 gives nice template with left menu slider as per image:
Is there any NativeScript way of doing this with Angular2?
I installed npm i nativescript-telerik-ui in to the project and as per example http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started pleased the html code in to my file :
<RadSideDrawer exampleTitle toggleNavButton>
<StackLayout tkDrawerContent class="sideStackLayout">
<StackLayout class="sideTitleStackLayout">
<Label text="Navigation Menu"></Label>
</StackLayout>
<StackLayout class="sideStackLayout">
<Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
<Label text="Social" class="sideLabel"></Label>
<Label text="Promotions" class="sideLabel"></Label>
<Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
<Label text="Important" class="sideLabel"></Label>
<Label text="Starred" class="sideLabel"></Label>
<Label text="Sent Mail" class="sideLabel"></Label>
<Label text="Drafts" class="sideLabel"></Label>
</StackLayout>
</StackLayout>
<StackLayout tkMainContent>
<Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
<Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
</StackLayout>
</RadSideDrawer>
But once I run tns run android --emulator I can't see Deawer appeared on the screen.
Maybe you have forgotten to include the SIDEDRAWER_DIRECTIVES into the declarations of the bootstrapped #NgModule.
You can see full details on how to use RadSideDrawer or any of the other UI elements of the nativescript-telerik-ui plugin in your {N} + Angular application here. For specific details regarding the RadSideDrawer you can take a look at its official documentation here.
I'm new to ember.js and I find it pretty confusing to figure out which is a good way for authentication (version 2.x) since most of the examples on the web seem to be outdated. Also the documentation often doesn't come with easy to understand beginner examples.
Right now I'm following this tutorial. The initializer works apparently, I can also trigger the action login but then it gets stuck on the controller.get bit. The console spits out a TypeError: controller.get(...) is undefinedTypeError: controller.get(...) is undefined.
app/components/login-form
...
actions: {
login: function() {
var controller = this;
controller.get("session").login().then(function(admin) {
// Persist your users details.
}, function() {
// User rejected authentication request
});
}
}
...
app/templates/components/login-form
<form {{action 'login' on='submit'}}>
<div class="form-group">
<label for="email">Login</label>
{{input value=email placeholder='Enter Login' class='form-control'}}
</div>
<div class="form-group">
<label for="password">Password</label>
{{input value=password placeholder='Enter Password' class='form-control' type='password'}}
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
app/templates/admin.hbs
<div class="page-header">
<h1>Login</h1>
</div>
{{login-form}}
I hope somebody can point me into the right direction to get this working. I'd also appreciate any general advice where to find good examples or explanations concerning the ember 2.x way of authentication.
Edit: I need to have this working with Firebase.
http://ember-simple-auth.com/
looks like your best bet. They have a good video on setting it up too.
For connection to firebase you could create backend to authenticated with and have that check firebase. I'm using express and jwt in node.js to communicate with my mongoDB database.
I'm having trouble trying to get ember and sails playing nice together when it comes to relationships with belongsTo/hasMany.
I have a simple form:
<form {{action 'addMessage' on='submit'}}>
<div class="form-group">
<label for='name'>Title</label>
{{input value=title class="form-control" required="required"}}
</div>
<div class="form-group">
<label for='location'>User</label>
{{input value=user class="form-control" required="required" value=1}}</div>
<p>
<button class="btn btn-primary btn-block" type="submit">Create Message</button>
</p>
And a controller with the action
actions: {
addMessage: function() {
var newMessage = this.store.createRecord('message', {
title: this.get('title'),
user: this.get('user')
});
newMessage.save().then(function() {
}, function(error) {
console.warn('Save Failed.', error);
});
},
I'm just passing a string, and a value which matches a user id. When I look at what's being passed the title is fine, but the user id is null.
I'm using sails ember blueprints so it should work, but think I might be doing something wrong.
I've uploaded the sample code here if someone can take a look https://github.com/jimmyjamieson/ember-sails-example
On your user input is says value=1 which I think is changing what the controller is writing that property as.
so instead of
{{input value=user class="form-control" required="required" value=1}}
try
{{input value=user class="form-control" required="required"}}
Ok, fixed. I've added a repo for others to look at. It works with ember and ember-data 2.0 https://github.com/jimmyjamieson/ember-sails-relationships-hasmany-belongsto-example
I am upgrading from Ember 1.7 to Ember 1.8.0-beta.2 (incremental upgrade, I hope to reach the latest 1.8.0-beta.4 without much trouble).
Apparently, Ember.TextField is deprecated:
DEPRECATION: Resolved the view "Ember.TextField" on the global
context. Pass a view name to be looked up on the container instead,
such as {{view "select"}}.
http://emberjs.com/guides/deprecations#toc_global-lookup-of-views-since-1-8
This is my original implementation:
{{view Ember.TextField classNames="form-control" valueBinding="properties§name" id="name-id" placeholderTranslation="generic.name" required="true"}}
So I have tried with (as I have done with other views):
{{view "textField" ...}}
No luck:
Uncaught Error: Assertion Failed: textField must be a subclass of
Ember.View, not
So, it seems it is now a component. So I try with:
{{input type="text" classNames="form-control" value=properties§name id="name-id" placeholderTranslation="generic.name" required="true"}}
And it seems to work, but I am worried that I am maybe doing something wrong, because neither id nor classNames nor placeholderTranslation are listed as supported properties for the input component.
So here my questions:
am I right in doing this refactoring {{view Ember.TextField}} -> {{input type="text"}}?
what about the properties not explicitly supported? They seem to work in my case. Is this a problem of outdated documentation, or ...
is there a list of generic properties supported by all components? I can not find any.
About your questions on ember here is my answer step by step:
Yes you are doing right refactoring
OLD- {{view Ember.TextField}}
NEW- {{input type="text" value="" name="" class=""}}
"Class" etc properties are anyways supported by html input so when you will add class, placeholder etc things those will be automatically supported as per my understanding
Also all property which are mentioned in Ember Doc other than that whatever is supported in html will always work. You can read the Comment mentioned in ember Ember source-code
{{input type="text" value="111" name="mytest" class="icon" id="wow"}}
AND I got
<input id="wow" class="ember-view ember-text-field icon" type="text"
name="mytest" value="111">
I am having some issues getting Ember.js to pick up and render a handlebars template file. I get the following error in my browser's debug console:
Error: <(subclass of Welcome.LoginView):ember166> - Unable to find template "login_view".
I have the following code in emberjs code in my app.js file:
Welcome = Ember.Application.create();
Welcome.LoginView = Ember.View.extend({
templateName: 'login_view'
});
I also have the following snippet in my index.html file:
<script type="text/x-handlebars">
{{view Welcome.LoginView}}
</script>
Finally, relative to the app.js file I have the file templates/login_view.handlebars, which contains the template contents to render:
<form class="form-inline">
<fieldset>
<input type="text" name="email" placeholder="email address">
<input type="password" name="password" placeholder="password">
<button class="btn btn-primary" type="submit">Sign In</button>
<!-- ... -->
</fieldset>
</form>
The error seems to indicate that it can't locate the handlebars template. When I look at the generated HTML I don't see the above form on the page.
Can anyone shed some light on what I am doing wrong?
From your question I assume that you are NOT using some tools which precompile a handlebars template for you. Ember looks for templates in the Ember.TEMPLATES array–it does not automatically look for templates located at templates/ and ending with .handlebars. Without a build step that compiles the templates for you, you have to do this on your own.
This may sound complicated but it's as easy as the following:
Ember.TEMPLATES["login_view"] = Ember.Handlebars.compile('TEMPLATE CODE');
You have to make sure that this template definition occurs before you want to use it.
Another solution would be to inline your template into your index.html and add a data-template-name="login_view" attribute to the script tag:
<script type="text/x-handlebars" data-template-name="login_view">
<form class="form-inline">
<!-- ... -->
</form>
</script>
However, if your project has numerous templates then I would suggest you adopt a build tool that does the first option for you.
Related question: Is it possible to load a Handlebars template via Ajax?