Creating todo mvc on Htmlix part 2 - adding template options to todo container

The guidelines for creating elements discussed the basic methods for creating a Todo application, but that if we want to have, for example, we have a micro pattern in each todo, for example, for the first one version of the template, for every second element we want to show its order number when creating, and for every third, we will want to display in it the total number of Todo elements, which will be updated when new ones are added and deleted.



For all this, you can use micro templates.



Link to this lesson

')

Creating templates

To create micro templates, you need to create a file template.html in the template folder. This folder is used by default for loading templates, if you want to place them in another folder, you will need to create an object of settings in the application description.

stateSettings:{ /// templatePath: "/template/template.html" }, 

Next, in the temlate.html file, we will create three different variants of micro patterns for these elements:

  <div data-variants1="array"> <p class="border-red" data-variant1="template" data-variant1-text="text" >yy</p> </div> <div data-variants2="array"> <div class="border-green" data-variant2="template" > <p data-variant2-text="text" >yyeee </p>   -<span class="border-green" data-variant2-spantext="text" >span</span> </div> </div> <div data-variants3="array"> <div class="border-blue" data-variant3="template" > <p data-variant3-text="text" >yyeee </p>  -<span class="border-red" data-variant3-spantext="text" data-variant3-listencount="emiter-counts-dodos" >span</span> </div> </div> 

The first option contains only one -text property, the second has two text and a span in which the sequence number will be displayed (text, spantext), the third one already contains three properties, the first two are the same as the previous one, and the third is the listener for the user event “emiter-counts- dodos "which we have already created in the previous section, in it we will update our

spantext and display the current amount of todo in the todos array.



Creating elements in javascript



Now it is necessary to supplement our description with new three elements, in order not to insert all variants into the main html code, we will load them immediately after the application initialization, but since the elements will be loaded later, using the fetch query, they must be placed into the fetchComponents object, in the description, it will look like this:

  fetchComponents: {//        "/template/template.html" variants1: { container: "variant1", props: ["text"], methods: { } }, variants2: { container: "variant2", props: ["text","spantext"], methods: { } }, variants3: { container: "variant3", props: ["text", "spantext","listencount"], methods: { listencount: function(){ this.parentContainer.props.spantext.setProp(this.emiter.prop); } } }, }, 

In the code above, we added a description of our three array options and, for the third variant, created an emiter-counts-dodos event listener for the emiter — listencount — which will update the number of todos when adding and deleting elements.



You also need to add a property with the type “render-variant” to the html page in our todo container (data-todo = “template”):

  <div data-todo-render="render-variant"> 

And do not forget to add a property to the prop array of our todo container:

  props: ['paragraf', 'completed', 'clickoncheckbox', "removebtn", "render"], /*  "render" */ 

Next, you need to change the code of the listener of the enter key click clickdown and the delete button of the todo - removebtn



Now, when the button is pressed, we will need to create one more element, according to the templates that we downloaded based on its location relative to the other numbers:

  clickkeydown: function(){ if(event.keyCode !== 13)return; var outerContainer = this.rootLink.createContainerInArr("todos", { paragraf: this.parentContainer.props['input'].getProp(), }); /*      */ var variant = "variants1"; /*        */ if(this.rootLink.state.todos.data.length % 2 == 0 )variant = "variants2"; if(this.rootLink.state.todos.data.length % 3 == 0 )variant = "variants3"; /*          */ /*           text, spantext,         ,    "variants1"  spantext     ,           conainer      html */ var conainer = this.rootLink.createContainerInArr(variant, { text: this.parentContainer.props['input'].getProp().charAt(0), spantext: this.rootLink.state.todos.data.length } ); /*    conainer    outerContainer        render    renderByLink        - htmlLink           outerContainer */ outerContainer.props.render.renderByLink(variant, conainer.htmlLink); /*      */ this.rootLink.eventProps["emiter-counts-dodos"].setEventProp( this.rootLink.state.todos.data.length); } 

Now we will change the code of the removebtn button in it. It will also be necessary to remove a variant of the microsample element when we remove the todo:

  removebtn: function(){ this.parentContainer.remove(); this.rootLink.eventProps["emiter-counts-dodos"].setEventProp( this.rootLink.state.todos.data.length); /*      */ var cildLinkToRemove = this.parentContainer.props.render["render-variant-htmlLink"]; /* html     , html            .renderByLink(variant, conainer.htmlLink)      */ var nameArray = this.parentContainer.props.render["render-variant"]; /*       */ this.rootLink.removeByLink(nameArray, cildLinkToRemove); /*      nameArray   html     cildLinkToRemove */ }, 

Well, now our todo will choose the microsample options based on the number of their creation.