Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:16Length:1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Using the Text Plugin

There is a handy plugin file that we can use with RequireJS in order to load HTML files inside our modules as if they were text. This is a great way to load HTML views used by our application, so we’ll see just how easy it is to do in this lesson.

Related Links

3.2 Using the Text Plugin

Hello. In this lesson, we're going to look at one of Require's plugins, the text! plugin, which we can use to load a text file like an HTML file as if it were a script module. We need to download the text plugin, so let's head on up to GitHub. [BLANK_AUDIO] And again, we can just save this in the external directory. [BLANK_AUDIO] So let's add a path option to our config for it. [BLANK_AUDIO] We can also add a path to our view folder just to keep the module paths in the dependency array nice and short. So let's now create the views folder. This can go in the root of our project. [BLANK_AUDIO] And let's add the views for our app. We'll need a separate view for the app, one for our list, and one for a task. So let's add three new files called app.html, list.html, and task.html. [BLANK_AUDIO] So first of all let's add the basic view for the overall App. [BLANK_AUDIO] [BLANK_AUDIO] So this is the view for the app itself. We'll come back to this and update it later on as and when we need to. So now let's add a basic list view. [BLANK_AUDIO] And let's add the view for a single task. [BLANK_AUDIO] So, notice how we don't need to specify all the usual craft like HTML elements, a head, or a body. Let me load HTML files with a text plug-in. Require will automatically ignore everything outside of the body tag, so it's pointless even including it in the file in the first place. Okay, great. So we need to wire a few things up now in order to be able to create a view with some knockout bindings and display it on the page. So let's set up the main app view using the app.js view model. We'll want to load our UI strings so we can specify the UI strings module as a dependency and we'll also want to use knockout. [BLANK_AUDIO] So now we can add the app constructor. [BLANK_AUDIO] So first of all, we want to add some properties that we can make observable so that our view can bind to them. [BLANK_AUDIO] So we can also add some observable properties [BLANK_AUDIO] We can then return the constructor from the module. Great. So now we can add some bindings to the app view. [BLANK_AUDIO] [BLANK_AUDIO] Great. So, mostly we just link to the visible text in the app to the view model properties that we just defined. So now we need a renderer. Let's create a new script file in the SRC folder called Renderer. [BLANK_AUDIO] The renderer module needs to use knockout so we can load this as a dependency. Next we can add a render method that accepts an element, a view and a view model and injects everything into the page. [BLANK_AUDIO] [BLANK_AUDIO] So that should be pretty much all our render function needs to do. We need to create the intermediate container because the view will be a string of HTML. We can then inject it using the append child method on the container cast into the method. So now we can just return the render method from the module. [BLANK_AUDIO] So now in our main module which acts as a general bootstrapper for the application, we can load the view and the view model and pass them to the renderer to be rendered to the page. So first of all let's get rid of our test code. So to load our HTML view as a dependency, we need to use the text plugin. To do this, all we need to do is add the path to the file as a string, like usual, but prefix it with the word, text, and an exclamation mark. So let's get rid of our dependencies, task manager and smokesignals. We won't use these in the main bootstrapper. But we do want to load our view. So here we specify that it should use the text plugin, and now we just specify the path to the file that we want to load. This time we do need to use the file extension. [BLANK_AUDIO] We'll also need the app view model and the renderer. [BLANK_AUDIO] Require will automatically use the text plug-in to load the HTML file for us. So, to render the app we can grab the container that we want to use, create a new view module instance and then pass these to the render method of the renderer along with the view that we required in. [BLANK_AUDIO] Okay. So as long as I've typed everything correctly, we should now be able to see the outer app viewModel when we run the page in a browser. [BLANK_AUDIO] And here is our To-do app. Looks like the text label for one of our buttons hasn't come out correctly so let's just check that quickly. [BLANK_AUDIO] So in this lesson we saw how to load text-based file types such as HTML files within our modules as dependencies using the text plugin. We saw that we just need to prefix the text file that we want to load with the string text followed by an exclamation mark. When we do this, the text plugin will automatically be used. We can then require this into one of our modules. And the context of the text file will be available as a string. Thanks for watching.

Back to the top