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>

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts