2011-11-10 6 views
3

내 사이트의 다양한보기에서 몇 가지 jQuery 플러그인을 사용하고 있습니다. 경우에 따라 플러그인은 document.ready를 사용하여 페이지로드시 외부 자바 스크립트 내에서 초기화됩니다. 다른 경우 초기화는 다른 플러그인의 콜백 fn 내에서 수행되거나 아약스 호출이 부분 뷰를 다시로드 한 후에 수행됩니다.ASP.NET MVC 사이트에서 Javascript 스 니펫 재사용

내가 초기화해야하는 방법과 장소에 따라 동일한 플러그인 초기화 스 니펫을 여러 곳에서 복사 붙여 넣기하고 있습니다.

사례 1 :

예로 들어 이것을 설명하기 위해 차례로 expander 플러그인을 사용하는 qTip 사용되는 FullCalendar

$(function() { 
    $('#calendar').fullCalendar({ // calendar 
    .. snip .. 
     eventRender: function (calEvent, element) { // render qtip on eventRender 
      element.qtip({ 
      ...snip... 
       events: { 
        ....snip.... 
        render: function() {// initialize expander on callback 
         // SNIPPET start 
         $('div.expandable').expander({ 
          expandPrefix: '', 
          expandText: '[...]', 
          userCollapseText: '[less]', 
          preserveWords: true, 
          widow: 4 
         }); 
         // SNIPPET end 
        } 
       } 

케이스 2 : AJAX 통해로드 부분도

$(document).ready(function() { 
     // SAME SNIPPET start 
     $('div.expandable').expander({ 
      expandPrefix: '', 
      expandText: '[...]', 
      userCollapseText: '[less]', 
      preserveWords: true, 
      widow: 4 
     }); 
     // SAME SNIPPET end 
}); 

당연히이 접근 방법에 대한 큰 팬이 아니며이를 처리 할 수있는 더 나은 방법이 있는지 궁금해하고 있습니다. 내가 뭘 찾고 있는데요 "부분보기"개념이지만, 자바 스크립트에 대한. NET에서 MVC3 면도기 사이트. 일반적인 위치에 $ ('div.expandable') 스 니펫을 포함하고 필요한 곳을 포함하는 아이디어입니다.

외부 js 파일과 함께 사용할 수있는 아이디어 나 제안 사항이 있습니까?

감사합니다.

답변

5

평소에는 자바 스크립트 코드 조각에 helper objects을 만듭니다. 기본적으로

:보기 내부 그리고

@helper qTipRender() 
{ 
    // SNIPPET start 
    $('div.expandable').expander({ 
     expandPrefix: '', 
     expandText: '[...]', 
     userCollapseText: '[less]', 
     preserveWords: true, 
     widow: 4 
    }); 
    // SNIPPET end 
} 

:

render: function() { 
    @JavascriptHelper.qTipRender(); 
} 
See this for a "tutorial".

당신이 할 당신의 App_Code 폴더에 JavascriptHelper.cshtml라는 파일을 생성하고, 꽤 그것에 추가입니다

매개 변수가있는 경우 :

당신은 또한 추가되어 수행 할 수있는 매개 변수 :보기 내부 그리고

@helper qTipRender(bool preserveWords) 
{ 
    // SNIPPET start 
    $('div.expandable').expander({ 
     expandPrefix: '', 
     expandText: '[...]', 
     userCollapseText: '[less]', 
     preserveWords: @preserveWords, 
     widow: 4 
    }); 
    // SNIPPET end 
} 

:

render: function() { 
    @JavascriptHelper.qTipRender(true); 
} 

은 매우 쉽게 자신의 매개 변수가 약간 다를 경우에도, 자바 스크립트 snippits 많이 유지할 수 .

+0

굉장 - 시험해 볼게요 - 고마워요! – seekay

+0

죄송합니다, 나는 총을 뛰었습니다 - 당신의 대답은 자리에 있지만 js가 @JavascriptHelper 비트를 이해하지 못하기 때문에 외부 js 파일에는 사용할 수 없습니다. js 전용 솔루션 (있는 경우) – seekay

+0

외부 js 파일의 의미는 무엇입니까? jquery.expander.js 등을 포함하는 것? 정상적으로 초기화하는 것 외에도 외부 라이브러리에서 제대로 돌아 다니지 않기 때문에? –