Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ember.TextField.extend can not be found... #1143

Closed
chrishough opened this issue Jun 24, 2014 · 11 comments
Closed

Ember.TextField.extend can not be found... #1143

chrishough opened this issue Jun 24, 2014 · 11 comments

Comments

@chrishough
Copy link

@chrishough chrishough commented Jun 24, 2014

I have been following this guide to add parsley js to my ember application. When I attempt to use the text field defined in components/text-input.js as follows:

export default Ember.TextField.extend({
  attributeBindings: ['parsley-type']
});

no matter what I do, I am having a hard time referencing this in my view.

      {{view FrontendENV.TextInput  
        type="email"
        name="email_address"
        id="register-email"
        class="large"
        parsley-type="email"
        parsley-required-message="Email required!"
        parsley-type-email-message="Valid email format name@yourmail.com required!"
        placeholder="name@yourmail.com"}}

I know need to add more bindings, but how do I reference that text field?

@chrishough

This comment has been minimized.

Copy link
Author

@chrishough chrishough commented Jun 24, 2014

In case others are looking for a way to achieve this, here is how I solved it.

Create the file initializers/text-field.js with the following:

export default {
  name: 'text-field-configuration',
  initialize: function() {
    Ember.TextField.reopen({
      attributeBindings: [
        'parsley-type',
        'parsley-required-message',
        'parsley-type-email-message',
        'placeholder'
      ]
    });
  }
};
@chrishough chrishough closed this Jun 24, 2014
@jgwhite

This comment has been minimized.

Copy link
Contributor

@jgwhite jgwhite commented Jun 24, 2014

Be wary of re-opening classes in initializers. In your test suite, the initializer will be run multiple times and therefore the class will be re-opened multiple times leading to a big stack of mixins.

In the former example—where you’re defining your text-input as a component—can’t you reference it as you would any other component?:

{{text-input
        type="email"
        name="email_address"
        id="register-email"
        class="large"
        parsley-type="email"
        parsley-required-message="Email required!"
        parsley-type-email-message="Valid email format name@yourmail.com required!"
        placeholder="name@yourmail.com"}}
@chrishough

This comment has been minimized.

Copy link
Author

@chrishough chrishough commented Jun 24, 2014

@jgwhite Curious... that could work. However, wouldn't I have to create a component for every type of field in the application? The reopens recommended in the emberjs docs would only needed to be added one time right? ..Sorry if these are dumb ?s, I am still grokking ember.

@chrishough

This comment has been minimized.

Copy link
Author

@chrishough chrishough commented Jun 24, 2014

@jgwhite I had previously setup reopens like this #820

@jgwhite

This comment has been minimized.

Copy link
Contributor

@jgwhite jgwhite commented Jun 24, 2014

Cool — In that case can I ask why you switched to using initializers?

@jgwhite

This comment has been minimized.

Copy link
Contributor

@jgwhite jgwhite commented Jun 24, 2014

Re the previous comment — you’ll have to reopen or subclass each of the four Ember field types (TextField, Checkbox, TextArea and Select) either way. I wouldn’t strongly advise against using reopen, but I would advise against using it in the initializer.

@chrishough

This comment has been minimized.

Copy link
Author

@chrishough chrishough commented Jun 24, 2014

I can migrate them back to the external folder I had setup, not a huge issue. Here is where I found that issue : #676

@chrishough

This comment has been minimized.

Copy link
Author

@chrishough chrishough commented Jun 24, 2014

If I move them to the external folder, wouldn't they still get hit the same way as the initializers? I had to included them in my app js just like the initializers.

@jgwhite

This comment has been minimized.

Copy link
Contributor

@jgwhite jgwhite commented Jun 24, 2014

No, because a file is only ever evaluated once by the module loader. Initializer functions are run every time the app boots.

@chrishough

This comment has been minimized.

Copy link
Author

@chrishough chrishough commented Jun 24, 2014

Thank you for the tips @jgwhite I switched them all back to use the external folder instead. HAving them only load once is a great thing.

@jgwhite

This comment has been minimized.

Copy link
Contributor

@jgwhite jgwhite commented Jun 24, 2014

😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.