1- # ember-data-bootstrap3-forms [ ![ GitHub version ] ( http://badge.fury.io/gh/cybertoothca%2Fember-data-bootstrap3-forms.svg )] ( http://badge.fury.io/gh/cybertoothca%2Fember-data-bootstrap3-forms )
1+ # ember-data-bootstrap3-forms
22
3- [ ![ npm version] ( http://badge.fury.io/js/ember-data-bootstrap3-forms.svg )] ( http://badge.fury.io/js/ember-data-bootstrap3-forms ) ![ downloads] ( https://img.shields.io/npm/dy/ember-data-bootstrap3-forms.svg ) [ ![ CircleCI ] ( http://circleci.com/gh/cybertoothca/ember-data-bootstrap3-forms.svg?style=shield )] ( http://circleci.com/gh/cybertoothca/ember-data-bootstrap3-forms ) [ ![ Code Climate] ( http://codeclimate.com/github/cybertoothca/ember-data-bootstrap3-forms/badges/gpa.svg )] ( http://codeclimate.com/github/cybertoothca/ember-data-bootstrap3-forms ) ![ Dependencies ] ( http://david-dm.org/cybertoothca/ember-data-bootstrap3-forms.svg ) [ ![ ember-observer-badge ] ( http://emberobserver.com/badges/ember-data-bootstrap3-forms.svg )] ( http://emberobserver.com/addons/ember-data-bootstrap3-forms ) [ ![ License ] ( http://img.shields.io/npm/l/ember-data-bootstrap3-forms.svg )] ( LICENSE.md )
3+ [ ![ npm version] ( http://badge.fury.io/js/ember-data-bootstrap3-forms.svg )] ( http://badge.fury.io/js/ember-data-bootstrap3-forms ) ![ downloads] ( https://img.shields.io/npm/dy/ember-data-bootstrap3-forms.svg ) [ ![ Code Climate] ( http://codeclimate.com/github/cybertoothca/ember-data-bootstrap3-forms/badges/gpa.svg )] ( http://codeclimate.com/github/cybertoothca/ember-data-bootstrap3-forms )
44
5- This addon helps present your Ember-Data model errors in a consistent fashion using Bootstrap3 alerts and help-blocks.
6-
7- ## Tested Against
8-
9- [ ![ ember-lts-2.4] ( https://img.shields.io/badge/ember--try-ember--lts--2.4-brightgreen.svg )] ( https://circleci.com/gh/cybertoothca/ember-data-bootstrap3-forms )
10- [ ![ ember-lts-2.8] ( https://img.shields.io/badge/ember--try-ember--lts--2.8-brightgreen.svg )] ( https://circleci.com/gh/cybertoothca/ember-data-bootstrap3-forms )
11- [ ![ ember-lts-2.12] ( https://img.shields.io/badge/ember--try-ember--lts--2.12-brightgreen.svg )] ( https://circleci.com/gh/cybertoothca/ember-data-bootstrap3-forms )
12-
13- [ ![ ember-release] ( https://img.shields.io/badge/ember--try-ember--release-brightgreen.svg )] ( https://circleci.com/gh/cybertoothca/ember-data-bootstrap3-forms )
14- [ ![ ember-beta] ( https://img.shields.io/badge/ember--try-ember--beta-brightgreen.svg )] ( https://circleci.com/gh/cybertoothca/ember-data-bootstrap3-forms )
15- [ ![ ember-canary] ( https://img.shields.io/badge/ember--try-ember--canary-brightgreen.svg )] ( https://circleci.com/gh/cybertoothca/ember-data-bootstrap3-forms )
16-
17- ## Demo
18-
19- The demonstration web application can be found here:
20- [ http://ember-data-bootstrap3-forms.cybertooth.io/ ] ( http://ember-data-bootstrap3-forms.cybertooth.io/ ) .
5+ [ ![ ember-observer-badge] ( http://emberobserver.com/badges/ember-data-bootstrap3-forms.svg )] ( http://emberobserver.com/addons/ember-data-bootstrap3-forms ) [ ![ License] ( http://img.shields.io/npm/l/ember-data-bootstrap3-forms.svg )] ( LICENSE.md )
216
22- ## What Does This Addon Do?
23-
24- This addon supplies the following _ components_ :
25-
26- * [ ` {{twbs-errors-alert}} ` ] ( #twbs-errors-alert ) - a component that listens to a single model's errors
27- and prepares a bootstrap alert box with the fields you want in a bulleted list.
28- * [ ` {{twbs-form}} ` ] ( #twbs-form ) - a component that creates a form element that you can easily bind
29- the submit and reset action to. Then all you need to do is add a submit and/or reset button to your
30- form.
31- * [ ` {{twbs-form-group}} ` ] ( #twbs-form-group ) - a component generating a Bootstrap
32- ` <div class="form-group">...</div> ` that has intelligence built in to detect when it's
33- field enters the error-state; the ` .has-error ` class will be applied and error messages will be
34- appended to the bottom of the component's template.
35-
36- _ Further information about these items can be found in the Usage section below._
7+ This addon helps present your Ember-Data model errors in a consistent fashion using Bootstrap3 alerts and help-blocks.
378
389## Requirements
3910
40- * Ember >= 1.13.0
41- * Ember CLI
42- * Ember Data - the ` twbs-errors-alert ` & ` twbs-form-group ` components depend on Ember Data's
43- modeling of errors.
44- * You should have Bootstrap 3.x installed in your Ember application. Feel free to use the
11+ - Ember >= 1.13.0
12+ - Ember CLI
13+ - Ember Data - the ` twbs-errors-alert ` & ` twbs-form-group ` components depend on Ember Data's
14+ modeling of errors.
15+ - You should have Bootstrap 3.x installed in your Ember application. Feel free to use the
4516 [ ember-cli-bootstrap3-sass] ( http://emberobserver.com/addons/ember-cli-bootstrap3-sass )
4617 addon to setup Bootstrap if you haven't already done so.
4718
@@ -53,14 +24,29 @@ The following will install this addon:
5324ember install ember-data-bootstrap3-forms
5425```
5526
56- ** As mentioned, you should install Bootstrap3 in order for the correct styling to be applied. Refer to the
27+ ** As mentioned, you should install Bootstrap3 in order for the correct styling to be applied. Refer to the
5728requirements section above.**
5829
59- ### Upgrading
30+ ## Demo
31+
32+ The demonstration web application can be found here:
33+ [ http://ember-data-bootstrap3-forms.cybertooth.io/ ] ( http://ember-data-bootstrap3-forms.cybertooth.io/ ) .
34+
35+ ## What Does This Addon Do?
36+
37+ This addon supplies the following _ components_ :
38+
39+ - [ ` {{twbs-errors-alert}} ` ] ( #twbs-errors-alert ) - a component that listens to a single model's errors
40+ and prepares a bootstrap alert box with the fields you want in a bulleted list.
41+ - [ ` {{twbs-form}} ` ] ( #twbs-form ) - a component that creates a form element that you can easily bind
42+ the submit and reset action to. Then all you need to do is add a submit and/or reset button to your
43+ form.
44+ - [ ` {{twbs-form-group}} ` ] ( #twbs-form-group ) - a component generating a Bootstrap
45+ ` <div class="form-group">...</div> ` that has intelligence built in to detect when it's
46+ field enters the error-state; the ` .has-error ` class will be applied and error messages will be
47+ appended to the bottom of the component's template.
6048
61- When working through the Ember upgrade process, I recommend
62- invoking the ` ember install ember-data-bootstrap3-forms ` command following the upgrade. This should get you
63- the latest version of the addon.
49+ _ Further information about these items can be found in the Usage section below._
6450
6551## Usage
6652
@@ -71,40 +57,40 @@ As mentioned above there are several examples on the demonstration site:
7157
7258#### ` {{twbs-form}} `
7359
74- A standard HTML form with the Bootstrap3 ` .form ` class assigned. Provide a block
75- with all the form-groups and inputs that you want inside the form container. The
60+ A standard HTML form with the Bootstrap3 ` .form ` class assigned. Provide a block
61+ with all the form-groups and inputs that you want inside the form container. The
7662` twbs-form ` component accepts a ` submit ` and ` reset ` property both of which
7763should take in a closure function.
7864
7965##### Arguments
8066
81- * ` submit ` (OPTIONAL) - the action that will be fired if the form happens to
82- be submitted by a basic submit button or by pressing enter while focused on
83- an input. Ideal for posting model changes.
84- * ` reset ` (OPTIONAL) - the action the will be fired when the form is reset by
85- clicking on a basic reset button. Ideal for rolling back model changes.
67+ - ` submit ` (OPTIONAL) - the action that will be fired if the form happens to
68+ be submitted by a basic submit button or by pressing enter while focused on
69+ an input. Ideal for posting model changes.
70+ - ` reset ` (OPTIONAL) - the action the will be fired when the form is reset by
71+ clicking on a basic reset button. Ideal for rolling back model changes.
8672
8773###### Examples
8874
89- [ Check out the demo application] ( http://ember-data-bootstrap3-forms.cybertooth.io/ )
75+ [ Check out the demo application] ( http://ember-data-bootstrap3-forms.cybertooth.io/ )
9076
9177#### ` {{twbs-errors-alert}} `
9278
93- A Bootstrap3 _ alert_ box that contains a list of model errors. You provide a block to the component, it will be
94- placed in a paragraph element just above the unordered-list of errors. When the model does not have any errors,
95- the alert will not be visible.
79+ A Bootstrap3 _ alert_ box that contains a list of model errors. You provide a block to the component, it will be
80+ placed in a paragraph element just above the unordered-list of errors. When the model does not have any errors,
81+ the alert will not be visible.
9682
9783##### Arguments
9884
99- * ` model ` (** REQUIRED** ) - the supplied model's ` DS.Errors ` collection is the source for the list of errors presented
100- in the alert.
101- * ` excludes ` (OPTIONAL) - a comma-separated list of the camelCased attribute names from the model whose errors
102- will be ignored and not presented in the list. ** If you specify both an ` includes ` and ` excludes ` argument, the
103- ` excludes ` argument always takes precedence.**
104- * ` includes ` (OPTIONAL) - a comma-separated list of the camelCased attribute names from the model whose errors
105- should be included in the list.
106- * ` classNames ` (OPTIONAL) - use the ` classNames ` argument to pass an alert style to the errors alert. For example,
107- ` alert-danger ` or ` alert-warning ` .
85+ - ` model ` (** REQUIRED** ) - the supplied model's ` DS.Errors ` collection is the source for the list of errors presented
86+ in the alert.
87+ - ` excludes ` (OPTIONAL) - a comma-separated list of the camelCased attribute names from the model whose errors
88+ will be ignored and not presented in the list. ** If you specify both an ` includes ` and ` excludes ` argument, the
89+ ` excludes ` argument always takes precedence.**
90+ - ` includes ` (OPTIONAL) - a comma-separated list of the camelCased attribute names from the model whose errors
91+ should be included in the list.
92+ - ` classNames ` (OPTIONAL) - use the ` classNames ` argument to pass an alert style to the errors alert. For example,
93+ ` alert-danger ` or ` alert-warning ` .
10894
10995##### Examples
11096
@@ -117,15 +103,15 @@ and listens for field errors in order to apply the danger colour and produce
117103the list of error messages below the form itself.
118104
119105To understand how this works, familiarize yourself with [ Bootstrap 3's form validation
120- states] ( http://getbootstrap.com/css/#forms-control-validation ) . Also recognize
106+ states] ( http://getbootstrap.com/css/#forms-control-validation ) . Also recognize
121107that Ember Data model errors can be viewed from a field's perspective and this
122108component is watching that particular view of the errors.
123109
124110##### Arguments
125111
126- * ` fieldErrors ` (** REQUIRED** ) - the model's errors collection for a specific
127- field. For example, if your model has a field named ` firstName ` you would pass
128- the following: ` model.errors.firstName ` .
112+ - ` fieldErrors ` (** REQUIRED** ) - the model's errors collection for a specific
113+ field. For example, if your model has a field named ` firstName ` you would pass
114+ the following: ` model.errors.firstName ` .
129115
130116##### Examples
131117
@@ -134,95 +120,4 @@ the following: `model.errors.firstName`.
134120### Troubleshooting And Tips
135121
1361221 . Do you have Ember Data in your application and are using it for your data modeling?
137- 1 . Is Bootstrap 3 installed? As the addon's name states, this isn't Bootstrap 4 ready.
138-
139- ---
140-
141- # Ember Addon Building And Testing
142-
143- ## Setup
144-
145- ### Checkout
146-
147- ```
148- $ git clone [email protected] :cybertoothca/ember-data-bootstrap3-forms.git 149- ```
150-
151- ### With NPM
152-
153- ```
154- npm install
155- ```
156-
157- ### With Yarn
158-
159- ```
160- yarn
161- ```
162-
163- ## Running The Dummy Application
164-
165- * ` ember server `
166- * Visit your app at http://localhost:4200 .
167-
168- ## Running Addon Tests
169-
170- * ` npm test ` (Runs ` ember try:testall ` to test your addon against multiple Ember versions)
171- * ` ember test `
172- * ` ember test --server `
173-
174- ## Building The Addon
175-
176- * ` ember build `
177-
178- For more information on using ember-cli, visit [ http://ember-cli.com/ ] ( http://ember-cli.com/ ) .
179-
180- # Linking This Addon For Local Testing
181-
182- ## Linking
183-
184- 1 . From the command line at the root of __ this__ project run the
185- ` npm link ` command to _ link_ this addon within your local
186- node repository.
187- 1 . From the _ other_ Ember project that you wish to test this addon
188- in, execute the following command:
189- ` npm link ember-data-bootstrap3-forms ` .
190- 1 . Now in that same _ other_ Ember project, you should go into the
191- ` package.json ` and add the ember addon with the version _ * _ . It will
192- look something like this: ` "ember-data-bootstrap3-forms": "*" ` . Now
193- when/if you execute ` npm install ` on this _ other_ project it
194- will know to look for the linked addon rather than fetch it from
195- the central repository.
196-
197- ## Unlinking
198-
199- 1 . Remove the addon from your local node repository with the following
200- command (that can be run anywhere):
201- ` npm uninstall -g ember-data-bootstrap3-forms `
202- 1 . Remove the reference to the ` ember-data-bootstrap3-forms `
203- in your _ other_ project's ` package.json ` .
204- 1 . Run an ` npm prune ` and ` bower prune ` from the root of your _ other_ project's command line.
205-
206- # Deploying The Dummy Application
207-
208- Make sure your ` ~/.aws/credentials ` file has a profile named _ cybertooth_
209- with a valid key and secret,
210-
211- ```
212- [cybertooth]
213- aws_access_key_id = <KEY>
214- aws_secret_access_key = <SECRET>
215- ```
216-
217- Deploy by invoking the following command: ` ember deploy production `
218-
219- Confirm your changes are showing up in our S3 container: http://ember-data-bootstrap3-forms.cybertooth.io/
220-
221- # Releasing & Publishing To NPM
222-
223- ```
224- npm version x.y.z-sub.#
225- git push
226- git push --tags
227- npm publish
228- ```
123+ 1 . Is Bootstrap 3 installed? As the addon's name states, this isn't Bootstrap 4 ready.
0 commit comments