All geek questions in one place

Individual template files are not displayed using trunk and underline

Using

<script type="text/template" id="templateid"> <!-- Template content goes here --> </script>

the code works well.

However, if I put the template as an external file, for example

 <script type="text/template" id="templateid" src="template.js"></script>

this does not work.

What is the difference between the above two methods, and also how can I get around this problem? Or am I missing something here that might be obvious?

+6
source share
2 answers

If you are just trying to get the template text using something like $("#templateid").html() from various examples, this will only work if the text is really embedded in the <script> .

In general, it is not possible to retrieve the contents of a remote file using the <script> .

If you want to load an external template, you need to use the code to explicitly retrieve the content (for example, using jQuery $.get() or require.js with a text plugin).

More on how to retrieve external templates in a Backbone context:

Be careful, however - overuse of this solution will lead to a large number of additional requests for template extraction and as a result of a rather sluggish application. In general, for performance, it is better to embed templates in the usual way (built into <script> tags).

+9
source

Despite the fact that ive accepted a different answer, I went ahead and fulfilled this specific requirement in several ways. I published the best and simplest method that I found, which, in my opinion, will be useful for people who do not want to use any template mechanisms, such as a puppet or so.

Using Masters and Underscore:

Folder structure

The folder structure may be as follows:

 Root: ├───css ├───js │ ├───router.js │ ├───model.js │ ├───view.js │ └───config.js ├───templates │ ├───home.html │ ├───login.html │ └───register.html └───images └───index.html

Base template

You will need a basic template (index.html) in which you will display different templates. This ensures that the overall html content, such as a listener, footer, navigation menu, etc., does not load every time a new page is displayed, and thereby greatly increases the page loading speed.

The sample structure may be as follows:

 <html> <head> <!--Relevant CSS files--> </head> <body> <div class="template_body"> <div class="header"> <!--HTML content for header--> </div> <div class="content" id="template"> <!--This would be where the dynamic content will be loaded--> </div> <div class="footer"> <!--HTML content for footer--> </div> </div> <!--Include relevant JS Files--> </body> </html>

Note. Please note that you can choose the structure of the template as you want. What I use is more general so that everyone can relate to it easily.

View

In your view, you can display a specific template of the base template as follows:

 var LoginView = Backbone.View.extend({ el: "#template",//Container div inside which we would be dynamically loading the templates initialize: function () { console.log('Login View Initialized'); }, render: function () { var that = this; //Fetching the template contents $.get('templates/login.html', function (data) { template = _.template(data, {});//Option to pass any dynamic values to template that.$el.html(template);//adding the template content to the main template. }, 'html'); } }); var loginView = new LoginView();

Please note that the el tag is very important.

To pass values ​​for viewing, just pass them like this:

 var data_to_passed = "Hello"; $.get('templates/login.html', function (data) { template = _.template(data, { data_to_passed : data_to_passed }); //Option to pass any dynamic values to template that.$el.html(template); //adding the template content to the main template. }, 'html');

And in the template:

 <%=data_to_passed;%>//Results in "Hello"

You can pass an array, an object, or even a variable.

Hope this was helpful. Greetings

+23
source

Source: https://habr.com/ru/post/948126/

More articles:


All Articles