Handle bar 사용 사례

    <script type="text/javascript" src="../../Scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../../Scripts/handlebars.min.js"></script>
    <script type="text/javascript" src="../../Scripts/linq.min.js"></script>
<body>
        <!--*******************Layouts**************************-->
        <div id="layout_list">
            
        </div>
        <div id="layout_operation">
           
        </div>
        

        <!-----------------------------------------------------
            *************************List Template******************
            **************************************************-->       
        <script id="t_list" type="text/x-handlebars-template">
  <table id="tblList">
    <thead>
      <th>Username</th>
      <th>Real Name</th>
      <th>Email</th>
    </thead>
    <tbody>
      {{#users}}
        <tr>
          <td>
            <a id="lnkViewDetails" href="#" pk="{{Id}}">{{username}}</a></td>
          <td>{{firstName}} {{lastName}}</td>
          <td>{{email}}</td>
        </tr>
      {{/users}}
    </tbody>
  </table>

</script>
        
        <!--
            ------------------Operate Template 
            -->

        <script id="t_operation" type="text/x-handlebar-template">
        <div>UserName : <input type="text" value="{{username}}" id="txtOpUserName" /></div>
            <div>First Name : <input type="text" value="{{firstName}}" id="txtOpFirstName" /></div>
            <div>Last Name: <input type="text" value="{{lastName}}" id="txtOpLastName" /></div>
            <div>Email : <input type="text" value="{{email}}" id="txtOpEmail" /></div>

            <input type="text" style="display:none" id="hdnOpId" value="{{Id}}" />
           
            <input type="button" id="btnSave" value="Save/Add" />
            <input type="button" id="btnDelete" value="Delete" />
        </script>
        

        <script type="text/javascript">
            
            //DataContext which should be retrieved from Controller
            var data = {
                users: [
                    {Id:1, username: "alan", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                    {Id:2, username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" },
                    {Id:3, username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
                ]
            };
            
            //*********
            //Actions
            //*********
            
            //render list
            //datacontext+temlate ->compile->html
            //replace html->layout html
            
            //on load , apply list template , show data list
            applyT("layout_list", "t_list", data);
            
            //Details
            //on click each item , apply template > add event 
            //ONCE AGAIN .for each click ,need to add event 
            $("#tblList").find("tr td a").click(function() {
                var id = $(this).attr("pk");
                
                var user = Enumerable.From(data.users).First(function(u) {
                    return u.Id == id;
                });
                applyT("layout_operation", "t_operation", user);

                //Save
                $("#btnSave").click(function () {
                    
                    ////post current changes to controller
                    PostAction("SaveOrAdd");
                });
                //Delete
            });
           
            
            //******Common****************
            
            //$.Ajax
          
            
            $(document).ajaxError(function (event, xhr) {
                alert(xhr.status + ":" + xhr.statusText);
            });
            
            function PostAction(name) {
                var student = {
                    Id: $("#hdnOpId").val(), FirstName: $("#txtOpFirstName").val(),
                    LastName: $("#txtOpLastName").val(), UserName: $("#txtOpUserName").val(), Email: $("#txtOpEmail").val()
                };
                var url = "/Test/" + name;
                debugger;
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: student,
                    success: function (obj) {
                        alert(JSON.stringify(obj.Entity.Data));
                    },
                    dataType: "json"
                    
                });

            }
                                                                               

            //Apply Template to #layout
            function applyT(layoutId,templateId,data) {
                $("#"+layoutId).html(Handlebars.compile($("#"+templateId).html())(data));
            }

        </script>

    </body>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Handle bar 사용 사례

좋은 웹페이지 즐겨찾기