ASP.NET MVC3 EditorTemplates는 jQuery를 복제하지 않고 Ajax를 통해로드됩니까?

Question

저는 DateTime, Colors 등과 같은 것들을 위해 EditorTemplates를 사용하고 있습니다. 이들 템플릿의 상당 부분을 포함하고있는 내 양식은 주로 Ajax를 통해 부분 뷰로로드됩니다.

jQuery 초기화 스크립트를 각 편집기 템플릿의 맨 아래에 두는 대신 응답마다 한 번만 수행하는 개념적인 방법이 있습니까? 한 날짜에 10 개의 날짜 선택기가 있다고 가정 해 보겠습니다. 동일한 초기화 코드를 10 번 전달하는 것은 정말 어리석은 일입니다.

날짜 선택기가 10 개인 기본 폼에 초기화 스크립트를 배치하는 것이 효율적입니다 (물론 datetime 편집기 템플릿에 코드를 격리하는 것은 그리 어렵지는 않지만). 하나의 날짜 선택 도구를 다른 양식 또는 2 ~ 3 개로 만들면 코드의 여러보기에서 해당 스크립트를 복제 할 수 있습니다.

그렇다면 여기 어떻게 편집기 템플릿을 올바르게 활용할 수 있습니까? 나는 내가 좋아하는 뭔가를 찾고 있어요 생각 -

EnsureThisScriptIsOutputOncePerThisResponse(<script>$('.datepicker').datepicker("insert lengthy config here");</script>) 

이 AJAX를 통해 렌더링 부분 뷰와 함께 작동 에디터 템플릿의 맨 아래에 추가 할 수 있습니다.

Answer 1

한 일을 한 것입니다. 예를 들어 단추가 있습니다.

<input type='submit' data-button=true data-button-icon='ui-icon-check' value='approve' /> 

시작 파일이 같은 버튼 뭔가를 찾습니다 :의 내가 다음 HTML했다 가정 해 봅시다

function initializeButtons() { 
    $("*[data-button=true]").each(function() { 
     var $this = $(this); 
     var initialized = $this.data('button-init'); 
     if (!initialized) { 
      var options = { 
       disabled: $this.data('button-disabled'), 
       text: $this.data('button-text'), 
       icons: { 
        primary: $this.data('button-icon-primary') || $this.data('button-icon'), 
        secondary: $this.data('button-icon-secondary') 
       } 
      }; 
      $this.button(options); 
      $this.data('button-init', true); 
     } 
    }); 
} 

$(document).ready(initializeButtons).ajaxSuccess(initializeButtons) 

이 만드는 일반적인 jQuery를 UI 초기화 코드 관리가 훨씬 쉽게, 우리는에 Html 헬퍼 확장을 생성 우리가 필요로하거나 사용하는 물건에 대한 데이터 속성을 쉽게 채울 수 있습니다.

Answer 2

그럼 편집기 템플릿을 어떻게 활용할 수 있습니까? I 내가 뭔가를 찾고있는 것 같아요 - 편집기 템플릿 아래쪽에 추가하려면이 스크립트의 IsIutputOncePerThisResponse()를 확인하십시오.

Cassette을 사용하십시오. 이 라이브러리는 부분 뷰에서도 어디서나 스크립트 및 스타일 시트를 참조 할 수있게 해주는 라이브러리입니다. 그런 다음 스크립트 참조 순서를 확인하고 스크립트를 렌더링하여이 스크립트와 참조가 한 번만 출력되고 일반적으로 응답으로 단일 위치에 출력되도록합니다.

업데이트 : 날짜 선택기 편집기 템플릿에서

을 다음과 같이 아약스에 대한

참조하는 스크립트를 수행 할 수 있습니다 - EditorTemplates/DateTime.cshtml

@model DateTime? 
@{ 
    Bundles.ReferenceScript("path to datepicker script. Script may reference jquery ui in its turn"); 
} 
//datepicker 

그리고 날짜 선택기 컨테이너 형태의 직접 렌더링, 스크립트. 아약스되지 않은 경우,이 레이아웃 페이지에 우리의 프로젝트는 데이터를 활용하여 눈에 거슬리지 자바 스크립트 패턴이 그런 일을 구성하는 속성을 확장하는 startup.js 파일을 가지고하는 것이었다에 우리가했던

@model ViewModelModelWithTenDates 
@Bundles.RenderScripts() //will output distinc script references in order 

//10 datepickers 
@Html.EditorFor(model => model.FirstDate) 

Answer 3

livequery 플러그인을 사용하여 초기화 코드를 외부 .js 파일에 추가하고 _Layout.cshtml에 파일을 포함시킬 수 있습니다.

이

<input type="text" id="id" init="datepicker makereadonly" /> 

이 두 가지 기능을 실행해야 함을 나타냅니다 :

$(".datepicker").livequery(function(){ 
    $(this).datepicker("insert lengthy config here"); 
}); 

Answer 4

나는 몇 가지 스크립트 실행을 필요로하는 물건 OM는 init 속성을 사용합니다. 그것들을 실행하는 것은 외부 파일에 정의 된 Ajax-complete에서 수행됩니다. 일단 항목이 초기화되면 초기화 된 속성이 설정됩니다. 이렇게하면 부분 뷰에 스크립트가 없습니다.

var initFunctions = initFunctions || {}; 

initFunctions.datepicker = function(item) { 
    $(item).datepicker(); 
}; 

initFunctions.readonly = function(item) { 
    $(item).attr("disabled", "disabled"); 
}; 

$('body').ajaxComplete(function (e, xhr, settings) { 
    var itemFunction = function (item) { 
    var $this = $(item); 
    var attr = $this.attr("init"); 
    var functions = attr.split(" "); 
    for (var i = 0; i < functions.length; i++) { 
     var funcName = functions[i]; 
     var func = initFunctions[funcName]; 
     if (func != undefined) 
      func($this); 
    } 
    $this.attr("initialized", ""); 
    }; 

    items = $("[init]:not([initialized])"); 
    items.each(function (index, item) { itemFunction(item); }); 
});