Ember-paper: Cannot set property element of [object Object] which has only a getter - ember.js

I am using Ember-paper 0.2 which seems to be latest stable version.
i'm creating navbar learning from tutorial. whenever I add paper-button i am getting error " Cannot set property element of [object Object] which has only a getter".
It looks like i have mistaken some where but not able to figure out what.
Below is my code for navbar.
{{#paper-toolbar}}
<div class="md-toolbar-tools">
{{logo}}
<div class="paper-right">
{{#paper-button size="2"}} {{paper-icon "refresh"}} {{/paper-button}}
</div>
</div>
{{/paper-toolbar}}
{{outlet}}
{{logo}} is my logo component below is the component code
<img src="assets/images/logo_sm_app.png" class="logo">
I have defined my styles in app.scss file
I have used steps as stated in the ember-paper documentation. Could you please tell me what is missing?
Below is the stack trace of the error i am getting
Uncaught TypeError: Cannot set property element of [object Object] which has only a getter
at Class.didInsertElement (ripple-mixin.js:31)
at Class.superWrapper [as didInsertElement] (ember.debug.js:40424)
at Class.trigger (ember.debug.js:42259)
at Class.superWrapper [as trigger] (ember.debug.js:40424)
at CurlyComponentManager.didCreate (ember.debug.js:12725)
at Environment.commit (ember.debug.js:50904)
at Environment.commit (ember.debug.js:9283)
at InteractiveRenderer._renderRoots (ember.debug.js:12121)
at InteractiveRenderer._renderRootsTransaction (ember.debug.js:12150)
at InteractiveRenderer._renderRoot (ember.debug.js:12071)

Related

I can't get parent in child component

I am new in ember js. And I am trying to repeat this
http://discuss.emberjs.com/t/how-to-communicate-to-child-components/7772/7
{{#my-super-form as |parent|}}
{{some-child notify=parent}}
{{/my-super-form}}
And I always get
Uncaught TypeError: this.get(...).send is not a function
in
this.get('notify').send('somethingHappened');
Why?..
I use ember 1.12
And where can I read about params in yield, for example
{{yield param1 param2}}
I have found all answers here
http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html
in my my-super-form.hbs need to use
{{yield this}}

Nested partial not working

I've got a partial in templates/layout/ called -header.hbs . In my application.hbs, I put {{partial 'layout/header'}} but when :I run the server it says Uncaught Error: Assertion Failed: Unable to find partial with name 'layout/header'. I am using ember-cli Any ideas?
My application.hbs:
{{partial 'layout/header'}}
<div class="container">
{{outlet}}
</div>
For ember-cli per its documentation partials should be within templates/foo.hbs directory to call a partial in your handlebars use the following code to render the template
{{partial "foo"}}

Ember.js server side form validation display

I have a form in Ember JS and I want to:
1. Display the errors for the fields right next to each field in error ;
2. Display any general errors at the top of the form ;
3. Have these errors persist while the user correct the form.
Edit: JSBin here
I have the following template for the form:
{{#if isSaving}}
<p>Saving Record</p>
{{/if}}
{{#if isError}}
<p>There was an error saving the record</p>
Base errors( {{errors.base}} )
{{/if}}
<form {{action 'create' this on='submit'}}>
<p>Title: {{input type="text" value=title}}</p>
<p>Title Errors( {{errors.title}} )</p>
<p>Body: {{textarea value=body}}</p>
<button>Create</button>
</form>
Right now my server is returning the following
{"errors":{"body":["can't be blank"],"title":["should begin with a capital letter"],"base":["General error message here"]}}
errors.title above is returning an object. How can I get the message out of it.
When the user starts typing, the object message is wiped out.
The isError never seems to fire.
What am I doing wrong?
First: Your errors.title is (like all the other properties of your server response) an Array so you'd get the title with errors.title[0]. As you cannot reference it like this from Handlebars directly you'd either have to provide it from the controller or pass your server response to a custom helper.
Second: It's hard (or better to say impossible) to tell why isError is never triggered/set without code...
errors is an array, and the proper way to iterate over them is the following:
{{#each errors.fieldname}}
{{this.message}}
{{/each}}

Why does EmberJS throws out an error when I use {{#link-to 'index'}}?

When I have a link in my template to index using the link-to helper, like so: {{#link-to 'index'}}Home{{/link-to}}, exactly as it's demonstrated on the documentation page here, I get the following error in the console and the application will not render:
Uncaught TypeError: Cannot call method 'lookup' of null

bindAttr calls error 'TypeError: elem is undefined' when collection of views rerendered

I'm using an Ember.CollectionView with an itemView that contains {{bindAttr class="App.offersController.filters.profile:selected"}}.
When App.offersController.filters changes, the collectionView rerender each itemView.
When I use {{bindAttr class="App.offersController.filters.profile:selected"}}, I receive error TypeError: elem is undefined on line 18675, Ember try to change attribute that was destroyed with old view.
In Ember's code i see comments:
If we can't find the element anymore, a parent template has been re-rendered and we've been nuked. Remove the observer.
It works when i use {{App.offersController.filters.profile}}, but not with {{bindAttr class="App.offersController.filters.profile:selected"}}
Update your ember.js into latest because there is an issue in ember.10.pre. Please refer here