Monday, April 2, 2018

jsrender jsviews jsobservable

https://www.jsviews.com
1. jsrender
2. jsviews
3. jsobservable
jsrender.html:-
------------------
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsrender.js"></script>
</head>
<body>
    <div id="result"></div>
    <script id="theTmpl" type="text/x-jsrender">
        <div>
            <em>Name:</em> {{:name}}
            {{if showNickname && nickname}}
            (Goes by <em>{{:nickname}}</em>)
            {{/if}}
        </div>
    </script>
    <script>
        var data = [
          {
              "name": "Sreekanth",
              "nickname": "Sree",
              "showNickname": true
          },
          {
              "name": "Santhan",
              "nickname": "Kumar",
              "showNickname": false
          }
        ];
        var template = $.templates("#theTmpl");
        var htmlOutput = template.render(data);
        $("#result").html(htmlOutput);
    </script>
</body>
</html>
jsviews.html:-
-----------------
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsrender.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.observable.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.views.min.js"></script>
</head>
<body>
    <div id="result"></div>
    <script id="theTmpl" type="text/x-jsrender">
        <div>
            Edit: <input type="checkbox" data-link="editable" />
            <em>Name:</em> {^{:name}}
            {^{if showNickname && nickname}}
            (Goes by <em data-link="nickname"></em>)
            {{/if}}
            {^{if editable}}
            <div>
                <input data-link="name" />
                <input data-link="nickname" />
                Show nickname: <input type="checkbox" data-link="showNickname" />
            </div>
            {{/if}}
        </div>
    </script>
    <script>
        var data = [
          {
              "name": "Sreekanth",
              "nickname": "Sree",
              "showNickname": true
          },
          {
              "name": "Pradeep",
              "nickname": "Reddy",
              "showNickname": false
          }
        ];
        var template = $.templates("#theTmpl");
        template.link("#result", data);
    </script>
</body>
</html>
jsobservable.html:-
-----------------------
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsrender.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.observable.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.views.min.js"></script>
</head>
<body>
    <table><tbody id="result"></tbody></table>
    <script id="theTmpl" type="text/x-jsrender">
        <tr>
            <td>
                <button id="addBtn">Add</button>
            </td>
        </tr>
        {^{for people}}
        <tr>
            <td>
                <button class="change">Change</button>
                <button class="remove">Delete</button>
                {^{:name}}
            </td>
        </tr>
        {{/for}}
    </script>
    <script>
        var template = $.templates("#theTmpl");
        var people = [
            {
                name: "Sreekanth"
            },
            {
                name: "Reddy"
            }
        ];
        var counter = 1;
        template.link("#result", { people: people });
        $("#addBtn").on("click", function () {
            $.observable(people).insert({ name: "name" + counter++ });
        })
        $("#result")
          .on("click", ".change", function () {
              var dataItem = $.view(this).data;
              $.observable(dataItem).setProperty("name", dataItem.name + "*");
          })
          .on("click", ".remove", function () {
              var index = $.view(this).index;
              $.observable(people).remove(index);
          });
    </script>
</body>
</html>