Building a Ui with Dative is pretty easy to setup
<body>
<div id="app"></div>
</body>import Dative from "dativejs";
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app", // target for the instance, Can be either an id or a class or a node
// OR
target: "#app",
template: "", // template for the instance
// OR
template: function(){},
data: {}, // reactive object
// OR
data: function(){ return {} },
methods: {}, // event listeners
store: store, // attaching the dytejs store
computed: {}, // combining/merging two or more datas
mounted: function(){}, // function invoked when the dom has mounted
created: function(){}, // function invoked when the instance is created
update: function({ data }){}, // function invoked when theirs any changes
directives: {} // creating custom directives
})
app.render()import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
count: 0
}),
template: function(){
return `
<h1>{{ count }}</h1>
<button dv-on:click="increase">Increase</button>
`
},
methods:{
increase(){
this.data.count++
}
}
})
app.render()As well as attributes, elements can have directives, which control the element's behaviour in some way.
dv-on:eventname="handler"Use the dv-on: directive to listen to DOM events.
The @eventname and dv-on="eventname: function" are the same with the dv-on:eventname
template: function(){
return `
<input type="text" dv-ref="input">
`
}Use the dv-ref directive to reference an element
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
html_content: "<h2>Hello World </h2>"
}),
template: function(){
return `
<div dv-html="html_content"></div>
`
}
})
app.render()Use the dv-html directive to insert content from the data to innerHTML of an element
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
text_content: "Hello World"
}),
template: function(){
return `
<div dv-text="text_content"></div>
`
}
})
app.render()Use the dv-text directive to insert content from the data to textContent of an element
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
show: false
}),
template: function(){
return `
<div dv-show="show">
<h1>I'll not display</h1>
</div>
`
}
})
app.render()Use the dv-show directive to toggle the element's display CSS property based on the truthy-ness of the given expression value
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
show: false
}),
template: function(){
return `
<div dv-if="show">
<h1>I'll be hidden</h1>
</div>
`
}
})
app.render()Use the dv-if directive to conditionally render the template based on the truthy-ness of the given expression value
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
styles:{
background: "red",
fontSize: 30,
'text-align': 'center'
}
}),
template: function(){
return `
<div :style="styles">
<h1>I'll have a red background</h1>
</div>
`
}
})
app.render()Use the :style directive to pass an object or an array to dynamically update styles. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
active_class:{
active: true
}
}),
template: function(){
return `
<div :class="active_class">
<h1>my parent tag will have a class name of active</h1>
</div>
`
}
})
app.render()Use the :class directive to pass an object or an array to dynamically update classes
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
href: '/'
}),
template: function(){
return `
<div>
<a :href="href">Home</a>
</div>
`
}
})
app.render()Use the :<attribute> directive to dynamically render contents from data to the element
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data: ()=>({
href: '/'
}),
template: function(){
return `
<div>
<a dv-bind:href="href">Home</a>
</div>
`
}
})
app.render()The dv-bind:<attribute> directive does exactly the same thing the :<attribute> does.Its the long form for the :<attribute>
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
template: function(){
return `
<div>
<h2 dv-rainbow>Hello DativeJs</h2>
</div>
`
},
directives:{
rainbow: function(el,{ bind,name }){
// el is the target element
el.style.color = `#${Math.random().toString().slice(2,8)}`
}
}
})
app.render()import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
template: function(){
return `
<div>
<h2 dv-color="green">Hello DativeJs</h2>
</div>
`
},
directives:{
color: function(el,{ bind,name }){
// el is the target element
// bind.value is the directives value
el.style.color = bind.value
}
}
})
app.render()import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
template: function(){
return `
<div>
<h2 dv-color:background="green">Hello DativeJs</h2>
</div>
`
},
directives:{
color: function(el,{ bind,name }){
// el is the target element
// bind.value is the directives value
// bind.args is the text that's after the :
if(bind.args === "background"){
el.style.background = bind.value
}else{
el.style.color = bind.value
}
}
}
})
app.render()Computed properties allow us to define a property that is used the same way as data, but can also have some custom logic that is cached based on its dependencies
computed:{
fullname: function(){
return this.firstname + ' ' + this.lastname
}
}It is often overlooked that the source of truth in Dative applications is the raw data object - a Dative instance only proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can share it by identity:
import Dative,{ reactive } from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var SourceofTruth = reactive({
name: "dative"
})
var vm = new Dative({
data: SourceofTruth
})
var app = new Dative({
data: SourceofTruth
})
// it should update the two applications
SourceofTruth.name = "Tobithedev";We use the set function to update the data property
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data:()=>({
username: 'James'
}),
template: function(){
return `
<div>
<h2>Hello {{ username }}</h2>
</div>
`
},
mounted(){
this.set({
username: "Tobithedev"
})
}
})
app.render()We use the get function to get the data property
import Dative from "dativejs"; // gzip (2.99KB)
Dative.config.slient = false; // it enables warnings
var app = new Dative({
el: "#app",
data:()=>({
username: 'Tobithedev'
}),
template: function(){
return `
<div>
<h2>Hello {{ username }}</h2>
</div>
`
},
mounted(){
console.log(this.get().username) // => Tobithedev
}
})
app.render()