Roadmap for Dativejs v2 alpha

DativeJs v2-alpha will be released soon.

The new features now are more incredible

• render() is not compulsory again

• update: function ({data}){} the update options has been deprecated

• store the store options has been deprecated too.In DativeJs v2-alpha after installing Dytejs, Dyte will be global. So you'll have to access it with the $store

• Dative.use has been deprecated use

 var app = new Dative({
   el: "#app",
   ...,
   use: [function({ proto, instance, Dative }){
    // proto is the Dative.prototype
   // instance is the current application
  // Dative is the Dative constructor
 }]
 })

OR

   var app = new Dative({
   el: "#app",
   ....
   })
   app.use(function({ proto, instance, Dative }){
    // proto is the Dative.prototype
   // instance is the current application
  // Dative is the Dative constructor
 })

• template The template for the instance can be written like this now

<script type="text/dative" id="template">
  <div>
     <h1>I'm {{name}}. The creator of DativeJs</h1>
  </div>
</script>

 new Dative({
   el: "#app",
   data:{
     name: "Tobithedev"
   },
   template: "#template"
 })

• {{value}} We have reworked the mustache syntax. Before

 template: `
   <!-- This will render -->
   <h1>{{ value }}</h1>
   <!-- This will not -->
   <h1>{{value}}</h1>
 `

The V2 of DativeJs compiler need the mustache to have space

But in v2-alpha

<script type="text/dative" id="template">
   <!-- This will render -->
   <h1>{{ value }}</h1>
   <!-- This will render also -->
   <h1>{{value}}</h1>
</script>

• comment There are two ways to write a comment in DativeJs v2-alpha First the html comment

<!-- This is html comment -->
 <h1>{{ value }}</h1>

Second is like the handlebars comment

 {{!This is a dative comment}}
<h1>{{value}}</h1>

The first comment will be rendered to the browser

The second will not be rendered

• iteration of array/object Before in v2-v1

 template: `
  <ul>
   ${
   this.data.foods.map(food=>{
     return `
      <li>${food}</li>
     `
   }).join("")
   }
  </ul>
 `

Now v2-alpha

  <ul>
  {{#each foods as food}}
    <li>{{food}}</li>
  {{/each}}
  </ul>

• conditional rendering Before

  template: `
    <div dv-if="show">
      Yooo
    </div>
  `

And the dv-if doesn't work well and no else So in v2-alpha we do

  {{#if show}}
    <h1>Yooo</h1>
  {{:else if typeof show == 'object'}}
   <p style="color: red">Error</p>
  {{:else}}
    <h1>Heyy</h1>
  {{/if}}