IceMx. Mvc 나의 js MVC 프레임 워 크 3. 댓 글 모듈 을 작성 합 니 다.

소개 하 다.
본인 의 풋내기, 자신의 천박한 견 해 를 가지 고 있 으 니, 여러분 의 지적 을 바 랍 니 다.
이 프레임 워 크 는 다음 과 같은 장점 이 있다.
1. 간단 (호출 이 간단 하고 실현 이 간단 하 며 과도 하지 않 은 디자인)
2. 보기, 컨트롤 러, 모델 분리 (분 리 는 유지 에 매우 필요 합 니 다)
3. 구성 요소 화 (모든 화면 음악 모듈 의 실현 은 하나의 구성 요소 의 실현, M + V + C = 구성 요소)
보기

 1 <div id="iceDiscussView">
 2     <!--List       -->
 3     <div id="iceDiscussViewBody">
 4         <span class="ll">
 5             <textarea id="@{iceId1}" data-id="iceTxtContent" rows="3" cols="50" invalue="      ……" style="color: black;"></textarea></span>    <span class="ll">
 6                 <input id="iceBtnSub" type="button" value="  " style="height: 54px;" /></span>
 7         <br class="clear">
 8         <span><a href="javascript:void(0)" onclick="FACE.Show('@{iceId1}',this)"><img  src="/img/face/bq_btn.png" /></a>       <a href="javascript:void(0)" id="iceDiscussShow">    <span id="iceDiscussCount"></span></a>    </span>
 9         <div id="iceDiscussPanel" >
10         </div>
11     </div>
12 
13     <!--List   -->
14     <div id="iceDiscussViewList" style='padding:5px 3px 5px 3px; border:1px dotted #cccccc'>
15         <div style="height:40px;"> <strong> @{userName}:   @{insTime}</strong>
16         </div>
17         <div>@{content}</div>
18         <div>
19             <a id="iceDiscussReplyLink" href="javascript:void(0)" data-discussId="@{discussId}" >  <span>@{replyCountStr}</span></a>
20             <br />
21         </div>
22         <div id="iceDiscussReplyList">
23 
24         </div>
25     </div>
26 
27     <div id="iceDiscussViewRepyList" style='padding:5px 3px 5px 25px;  border:1px dotted #cccccc'>
28         <div style="height:40px;"> <strong> @{userName}:   @{insTime}</strong>
29         </div>
30         <div>@{content}</div>
31     </div>
32 
33 </div>

보 기 는 말 할 필요 도 없고, 사실 그 를 템 플 릿 이 라 고 부 를 수도 있다. @{username} 이 플래그 들 은 해당 하 는 데이터 로 대 체 됩 니 다.
특이 한 것 은 @ {iceId 1} 을 무 작위 id 로 바 꿉 니 다.
모형.

 1 function DiscussModel() {
 2     this.GetList = function () {
 3         var list = [{ discussId:1,userName: "  ", content: "  ，    !", insTime: "2013-08-01", replyCount: 0 }
 4             , { discussId: 2, userName: "  ", content: "  ，    !", insTime: "2013-08-01", replyCount: 3 }
 5         ]
 6 
 7         $.each(list, function (i,data) {
 8             if (data.replyCount == 0) {
 9                 data.replyCountStr = "";
10             } else {
11                 data.replyCountStr = "("+data.replyCount+")";
12             }
13         })
14 
15         return list;
16     }
17     this.GetListCount = function () {
18         return 2;
19     }
20     this.Add = function (content, userName) {
21         var data = { content: content, userName: userName, insTime: IceMx.Date.Now()}
22         //   aja    
23         return data;
24     }
25 
26     this.GetListReply = function (discussId) {
27         if(discussId==2){
28             return [{ userName: "IceMx", content: "    ！", insTime: "2013-8-31" }
29             ]
30         }
31     }
32 }

주로 데이터 처 리 를 담당 합 니 다. 여 기 는 데 이 터 를 모 의 한 것 입 니 다. 실제 상황 은 ajax 를 통 해 배경 에서 돌아 올 수 있 습 니 다. 현재 ajax 의 동기 화 모드 만 지원 합 니 다. 비동기 모드 는 아직 처리 하지 않 았 습 니 다.
컨트롤 러

var DiscussController = IceMx.Mvc.NewController("Discuss", function () {

    //      
    var model = new DiscussModel(),
    _self = this,
    $body = $(IceMx.Model.Format(this.GetView("#iceDiscussViewBody").toString(), {})),
    $txt = this.GetView("[data-id='iceTxtContent']", $body),
    $btnSub = this.GetView("#iceBtnSub", $body),
    $iceDiscussShow = this.GetView("#iceDiscussShow", $body),
    $iceDiscussCount = this.GetView("#iceDiscussCount", $body),
    $replyMuBan = this.GetView("#iceDiscussViewRepyList").toString(),
    discussCount = 0;
    
    //    
    this.listMuBan = this.GetView("#iceDiscussViewList").toString();
   
    //    
    function SetDiscussCount(count) {
        if (typeof count == "string") {
            eval("discussCount=discussCount" + count);
        } else {
            discussCount = count;
        }

        if (discussCount == 0) {
            return;
        }
        $iceDiscussCount.html("(" + discussCount + ")");
    }
    function Init() {
        IceMx.Common.BindDefaultText($txt).BindEnter($txt, function () {
            $btnSub.click();
        });

        $btnSub.click(function () {
            _self.Add($txt.val(), "  ").appendTo("#iceDiscussPanel", $body);
        });

        SetDiscussCount(model.GetListCount());
    }

    //    
    this.GetListHtml = function () {
        var list = model.GetList(),
        htm = "";
        
        $.each(list, function (i,data) {
            htm += IceMx.Model.Format(_self.listMuBan, data);
        })

        var discussHtm = $(htm);
        discussHtm.delegate("#iceDiscussReplyLink", "click", function () {
         
            var discussId=this.attributes["data-discussId"].value,
                list = model.GetListReply(discussId),
                $this= $(this),
                htm = "";
            
            if(list){
                $.each(list, function (i, data) {
                    htm += IceMx.Model.Format($replyMuBan, data);
                })
                
                _self.GetView("#iceDiscussViewList", $this).find("#iceDiscussReplyList").append(htm);
            }
        })

        SetDiscussCount(list.length);

        return discussHtm;
    }

    this.GetBody = function () {
        $body = $(IceMx.Model.Format(this.GetView("#iceDiscussViewBody").toString(), {})),
        $body.find("#iceDiscussPanel").html("").append(this.GetListHtml());
        return $body;
    }

    this.Add = function (content, userName) {
        var data = model.Add(content, userName);
        var htm = IceMx.Model.Format(_self.listMuBan, data);
     
        SetDiscussCount("+1");
        $txt.val("").blur();
        IceMx.tip("    ……");
        return $(htm);
    }

    Init();
});

컨트롤 러 는 주로 데이터 와 보기 의 다리 로 서 보기 안의 일부 사건 도 이 를 통 해 등록 합 니 다.
여기 this. GetView 는 보 기 를 가 져 오 는 것 입 니 다. 구성 요소 가 불 러 올 때 보 기 를 컨트롤 러 에 연결 하기 때 문 입 니 다.
호출 단

 1     <script>
 2         var discussController, FACE;
 3         
 4         IceMx.Mvc.Get("Discuss","Face");
 5 
 6         IceMx.Event.AddEvent("MvcLoadOver", function () {
 7             FACE = new FaceController();
 8             discussController = new DiscussController();
 9             discussController.GetBody().appendTo("#panelDiscuss");
10         });
11     </script>
12 </head>
13 <body>
14     <form id="form1" runat="server">
15         <h1>Js Mvc     </h1>
16         <div style="border:1px solid #cccccc ; padding:5px;"><span><b>  js mvc        </b></span>
17 
18             <div style="background-color:#f8f8f8;padding:10px;">
19                 <p>        mvc           。</p>
20                 <p>1、Controller          。</p>
21                 <p>2、Model         。</p>
22                 <p>2、View     html    。</p>
23                 <p>
24                         ：       mvc js     。
25                         ：IceMx.Mvc.Get("Discuss","Face");
26                 </p>
27                 <p>        mvc  ，       MvcLoadOver     ，              。</p>
28             </div>
29             <br />
30             <div id="panelDiscuss">
31                 
32             </div>
33         </div>
34     </form>
35 </body>
36 </html>

            
        jquery 、 IceMx.Mvc 。
   IceMx.Mvc.Get("Discuss","Face");        、   、               。
               ，                 ，              ，        。
                          。

총결산
이것 이 바로 저의 사고 와 실현 절차 입 니 다. 여러분 의 가르침 을 바 랍 니 다.
기타
관심 이 있다 면 분 류 된 다른 글 에 관심 을 가 져 주 십시오. 당신 의 지 지 를 받 을 수 있다 면 감사 하지 않 을 것 입 니 다.