Adds best practices regarding context and vue to documentation
This commit is contained in:
parent
c4ba6ea684
commit
e8d525d07c
|
@ -66,6 +66,8 @@ Let's look into each of them:
|
||||||
This is the index file of your new feature. This is where the root Vue instance
|
This is the index file of your new feature. This is where the root Vue instance
|
||||||
of the new feature should be.
|
of the new feature should be.
|
||||||
|
|
||||||
|
The Store and the Service should be loaded in this file and provided as a prop to the main component.
|
||||||
|
|
||||||
Don't forget to follow [these steps.][page_specific_javascript]
|
Don't forget to follow [these steps.][page_specific_javascript]
|
||||||
|
|
||||||
**A folder for Components**
|
**A folder for Components**
|
||||||
|
@ -86,7 +88,7 @@ You can read more about components in Vue.js site, [Component System][component-
|
||||||
|
|
||||||
**A folder for the Store**
|
**A folder for the Store**
|
||||||
|
|
||||||
The Store is a simple object that allows us to manage the state in a single
|
The Store is a class that allows us to manage the state in a single
|
||||||
source of truth.
|
source of truth.
|
||||||
|
|
||||||
The concept we are trying to follow is better explained by Vue documentation
|
The concept we are trying to follow is better explained by Vue documentation
|
||||||
|
@ -332,6 +334,34 @@ gl.MyThing = MyThing;
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Manipulating the DOM in a JS Class
|
||||||
|
|
||||||
|
When writing a class that needs to manipulate the DOM guarantee a container option is provided.
|
||||||
|
This is useful when we need that class to be instantiated more than once in the same page.
|
||||||
|
|
||||||
|
Bad:
|
||||||
|
```
|
||||||
|
class Foo {
|
||||||
|
constructor() {
|
||||||
|
document.querySelector('.bar');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
new Foo();
|
||||||
|
```
|
||||||
|
|
||||||
|
Good:
|
||||||
|
```
|
||||||
|
class Foo {
|
||||||
|
constructor(opts) {
|
||||||
|
document.querySelector(opts.container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
new Foo({ container: '.my-element' });
|
||||||
|
```
|
||||||
|
You can find an example of the above in this [class][container-class-example];
|
||||||
|
|
||||||
## Supported browsers
|
## Supported browsers
|
||||||
|
|
||||||
For our currently-supported browsers, see our [requirements][requirements].
|
For our currently-supported browsers, see our [requirements][requirements].
|
||||||
|
@ -457,3 +487,4 @@ Scenario: Developer can approve merge request
|
||||||
[eslintrc]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/.eslintrc
|
[eslintrc]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/.eslintrc
|
||||||
[team-page]: https://about.gitlab.com/team
|
[team-page]: https://about.gitlab.com/team
|
||||||
[vue-section]: https://docs.gitlab.com/ce/development/frontend.html#how-to-build-a-new-feature-with-vue-js
|
[vue-section]: https://docs.gitlab.com/ce/development/frontend.html#how-to-build-a-new-feature-with-vue-js
|
||||||
|
[container-class-example]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/mini_pipeline_graph_dropdown.js
|
||||||
|
|
Loading…
Reference in New Issue