Open up index.js. Inside of the .each() method the first thing we will add is a reference to the help menu container that will hold the popdown help menu view:
Build the Template
Below our helpButtonContainer variable we will add the template string for our help menu:
The first part of the code is the link the user will click to view the help menu. In our example it will be the ‘link-text’ data attribute we defined in our HTML with a value of ‘?’. The value of ‘?’ will be passed into the variable linkText, which is defined using using the Underscore templating: <%- %>
Next is the container for the popdown menu. The <%- text %> variable will be replaced with our data attribute called ‘text’, which describes the purpose of a specific search.
Build the View
Now that we have our template in place we need to build out our reusable view component. For this we will be using a basic Backbone View.
Below where we added our template we will begin to create our new view. We will call this view ‘MenuLinkView’:
Next we will build out the basic structure of our view:
Above, the first thing we are defining is our initialize function. We will use the initialize function to pull in the data attributes from our HTML. The tagName defines that wrapper of this view as a span and finally the render function will handle the rendering of this view.
Next, let’s pull in the data attributes we’ve defined in our HTML:
The attrs object that is passed in will make more sense once we create a new instance of our MenuLinkView, but they pull in the data attribute that we defined in our HTML:
So, data-link-text will pass its values to attrs[‘link-text’] and data-text will pass its value to attrs[‘text’]. The ‘this’ part allows us to access the variable through the entire view. This will be helpful next when we reference the variables this.text and this.linkText in our render function.
Next, in the render function, we will first add the template we defined above:
Above we reference this.$el, a reference to the view’s element, which is the container we end up rendering this view into. The html part is saying to populate this element with the template linkPopDownTpl, which we are able to render out and pass variables to using Underscore’s _.template function.
Finally, we populate the two variables we defined in our template <%- linkText %> and <%- text %>. We are passing those template variables the values of the this.linkText and this.text variables we defined above in our initialize function.
Then, below, we create a new instance of the popdown menu:
This takes a couple of parameters. The first ‘el’ is the element in which the popdown should render. In this case it is our view’s element or this.$el as is described above. The dialog parameter takes a class to pass to the popdown element. The attachDialogTo needs us to define what part of the DOM we want to attach this popdown to. Here we are attaching it to the body. Finally, the mode is a dialog.
The final structure of our MenuLinkView view is below:
The final part of setting up our view is that we need to create a new instance of the view so we can pass our variables to it, which are this.text and this.linkText.
In our newly created instance of the MenuLinkView view we pass in the values for our link-text and text variables, which if you remember are defined as this.linkText and this.text inside the view’s initialize function. To do this we are using jQuery’s $.data() method to pull our HTML’s data attributes.
Note: Using the $.data() method we don’t need to define the data- part found in our HTML – it is simply implied when we reference it. So, instead of writing helpButtonContainer.data(‘data-link-text’), we can simply insert .data(‘link-text’) without the preceding data- part.
Next, we append our MenuLinkView element to our current helpButtonContainer (whichever one we are currently clicking on):
Finally we render our MenuLinkView out:
Save index.js and go back to your dashboard and refresh. You should now see the ?’s showing up at the bottom of your panels. When you click on one the popdown panel should appear like so: