English | 简体中文

Grammar

include(tplname[, tpldata])

nodetpl use keyword include reference template

Multiple Templates

Seems learned before, we've been able to do most work we want, but if a template that contains a lot of business scenarios, the amount of template code will appear huge and bloated, in order to solve this problem, nodetpl has a very clever way , we introduced the concept of multiple templates.

nodetpl is defined as multi-template scenario: If a template that contains a lot of business logic and business logic are relatively independent of each piece, then we can put the entire template is divided into multiple blocks, each block represents a business Scenes;

The basic structure of a multi template

Like regular templates, multi-template has a main template and several child templates, each template is wraped with a <template> tag:

<template name="main">
  // Main template code
</template>
<template name="subname-1">
  // Sub-template code 1
</template>
<template name="subname-2">
  // Sub-template code 2
</template>

Each template has a name attribute, which is the main entrance to the entire template template, name is main, sub-template name can be named according to your needs.

main entrance

Main template name is main, we can write the normal template code in main template.

To facilitate understanding, we assume this scenario:

Have a tryView demo

Thus, in addition to the main entrance of the template, we need to design an additional "Browse" state template, and a "Modify" state template.

<template name="main">
  <style>
  .title {
    font-size: 14px;
    font-weight: bold;
  }
  .content {
    padding: 10px;
  }
  </style>
  <div id="$ROOT">
    <div class="title">Personal Business Card [<a class="link-modify" href="javascript:;">modify</a>]</div>
    <div class="content"></div>
  </div>
  <script>
  var contentBox = $(ROOT).find('.content');
  var viewHtml = include('view');
  /* Top row references can also be written as:
     include ('view', $DATA)
     Because incoming data here is same with main template data,
     so the $DATA is omitted.
     If introduced to other data, can be written as:
     var subdata = {
       //...
     };
     include('view', subdata)
  */
  contentBox.html(viewHtml);
  $(ROOT).find('.title a.link-modify').on('click', function(){
    var editHtml = include('edit');
    contentBox.html(editHtml);
  });
  </script>
</template>

In nodetpl using keywords include redistributes a template.

The above code indicates:

Subtemplate

Similarly, we can write the normal template code in sub-template, but there will be slightly different:

Browse state

<template name="view">
  <style>
  ul li{
    border: 1px solid #ccc;
  }
  </style>
  <div id="$SUBROOT">
    <ul>
      <li>Name: <?=@name?></li>
      <li>Gender: <?=@gender?></li>
      <li>Age: <?=@age?></li>
    </ul>
  </div>
</template>

Edit status

<template name="edit">
  <style>
  ul li{
    margin: 0 10px;
    background-color: #eee;
  }
  </style>
  <div id="$SUBROOT">
    <form action="">
      <ul>
        <li>Name: <input type="text" name="name" value="<?=@name?>" /></li>
        <li>Gender: <input type="text" name="gender" value="<?=@gender?>" /></li>
        <li>Age: <input type="text" name="age" value="<?=@age?>" /></li>
      </ul>
      <div class="form-actions">
        <button type="submit">Save</button>
      </div>
    </form>
  </div>
  <script>
  $(SUBROOT).find('form').on('submit', function(){
    var name = $(this).find('input[name="name"]').val(),
      gender = $(this).find('input[name="gender"]').val(),
      age = $(this).find('input[name="age"]').val();
    $DATA.name = name;
    $DATA.gender = gender;
    $DATA.age = age;
    var viewHtml = include('view');
    $(ROOT).find('.content').html(viewHtml);
    return false;
  });
  </script>
</template>

From the code above, the main template has no different with normal, bug the sub-template "root element" is no longer used "ROOT", but "SUBROOT".

Communication