Dnyana is a javaScript framework.
npm install
npm run dev
test.html
<section>
<h1 ::map :bind="title"></h1>
</section>controller.js
var controller = new dnyana.$controller({
// data to bind with template view
data: {
title: "Heading"
},
// methods to be used for manipulation/events
methods: {
getTitle: function(){
return this.data.title;
},
setTitle: function(){
this.data.title = "Heading Changed!!";
}
},
// template to bind
template: "test" // name of template
});index.html
<!doctype html>
<html>
<head>
<!-- Installing Dnyana -->
<script src="dnyana_dist/templateCache.js"></script>
<script src="dnyana_dist/dnyana.js"></script>
<script src="scripts/controller.js"></script>
</head>
<body>
<!-- include [test.html] template here -->
<template name="test"></teamplate>
</body>
</html>In the Dnyana to bind any directive to any element you must have to tell Dnyana that this element is mapped for directive binding by adding ::map attribute to an element.
For example: <input type="text" ::map :value="name"/>. In this example :value is one of the directive in Dnyana and ::map is the attribute that must be applied on the element if you don't then Dnyana would not detect this element for binding process.
-
:if<input ::map :if="expression" type="text"/>
-
:valueImplementation is as above ^ -
:srcImplementation is as above ^ -
:showImplementation is as above ^ -
:hideImplementation is as above ^ -
:bindImplementation is as above ^ -
:htmlImplementation is as above ^ -
:event<button ::map :event="<event name>:<method name>"> Click Me! <button> <button ::map :event="click:listener()"> Click Me! <button> Pass arguments <button ::map :event="click:listener('one', 1+1)"> Click Me! <button> Pass event object as argument <button ::map :event="click:listener($event)"> Click Me! <button>
-
:class<span ::map :class="{'classname': condition}"></span>
-
:loop<ul> <li ::map :loop="collection"> <span ::map :bind="this"></span> </li> </ul>
-
:prop-<property><input ::map :prop-readonly="expression" type="text"/>
-
:attr-<attribute><input ::map :attr-id="expression" type="text"/>
-
:data-<property><input ::map :data-name="expression" type="text"/>