뷰에서 div를 클래스별로 다른 뷰에서 업데이트하는 방법은 무엇입니까?

Question

내 메인보기에서, 나는 빈 자리 표시 자 div를 사용자가 클릭 할 때 내부 뷰로 채 웁니다. 나는 메인 뷰에서 동일한 내부 뷰의 여러 복사본을 가질 수 있기를 원합니다. 각각의 내부 뷰에 다른 데이터가 묶여 있습니다.

기본보기에는 자체 모델과 컨트롤러가 있으며 내부보기에는 자체 모델과 컨트롤러가 있습니다. 기본보기에서 항목을 선택하면 내부보기는 선택과 관련된 데이터로 채 웁니다. 선택한 항목의 ID를 기반으로 웹 서비스에서이 데이터를 얻습니다. 그래서 내 시점의 모델에 데이터를 채울 수 없습니다.

여러보기 div가 모두 동일한 ID를 가질 수 없기 때문에 과 UpdateTargetId을 사용할 수 없습니다. 대신에, 나는 그것을 <div class='placeholderDiv' title='@[some_unique_id]'> 선언, 나는 성공적으로 내 주요 관점에서 다음과 같은 사용하여 여러 된 div를 그릴 수 있습니다 :

$.ajax(
{ 
    type: 'POST', 
    data: { 'id': id }, 
    dataType: 'html', 
    url: '/MyController/MyMethod', 
    success: function (result) { 
     $(".placeholderDiv[title=" + id + "]").html(result); 
    } 
}); 

지금, 나는 사용자가 내부 뷰에서 모델을 업데이트 할 수 있어야합니다. 내부 뷰의 컨트롤러에서이 작업을 수행 할 수 있지만 변경 내용을 표시 할 수는 없습니다. 내부보기에서 메인보기의 클래스 placeholderDiv으로 div에 액세스하려면 어떻게해야합니까?

Answer 1

"내부 뷰"를 클라이언트 측 템플릿에 "아웃소싱"하는 것이 좋습니다. 그런 식으로 표준 템플릿을 어딘가에 정의 할 수 있으며 (메인 뷰에있을 수도 있습니다), 서비스에서 모델을 가져 와서 템플릿의 복사본에 바인딩 한 다음 페이지에 렌더링하면됩니다. .

지금보고있는 훌륭한 템플릿 라이브러리는 DustJS입니다. 그것을 사용하여, 내가 지금 같은 템플릿을 정의 할 수 있습니다 (이 페이지에 한 번만 정의 할 수있다 참고) :

<div id="{id}"> 
    <h1>{name}</h1> 
    {?accounts} 
    <ul> 
     {#accounts} 
     <li>Account Number : {accountNumber}</li> 
     {/accounts} 
    </ul> 
    {:else} 
    <p class="error">No accounts for this user.</p> 
    {/accounts} 
</div> 

은 ... 다음과 같은 (반환 할 수있는 다음있는 같은 모델을 결합하여 서비스) :

{ 
    id : '123456', 
    name : 'TheBeatlemaniac', 
    accounts : [ 
     { accountNumber : 'FOO1234' }, 
     { accountNumber : 'BAR1234' }, 
     { accountNumber : 'FOB1234' } 
    ] 
} 

... 그리고 자동과 같이 마크 업을 렌더링 :

<div id="123456"> 
    <h1>TheBeatlemaniac</h1> 
    <ul> 
     <li>Account Number : FOO1234</li> 
     <li>Account Number : BAR1234</li> 
     <li>Account Number : FOB1234</li> 
    <ul> 
</div> 

... 그리고 마지막으로, 당신은 그래서 당신과 같이 기본보기 컨테이너에이 좀 때리고 수 있습니다.

당신이하고 싶은 일을 확실히 할 수있는 방법은 분명 있지만 대역폭을 줄이면 (일반적으로) 더 가볍다는 이유에서 JSON 데이터 귀하의 모델에 해당합니다. 서비스에서 데이터를 요청하고 키 변경만으로 고정 HTML 태그를 반환하면 중복성이 빠르게 증가합니다. 서버 측 코드가 필요로하는 처리 중 일부를 릴리스하도록하면 좋은 일일 수 있습니다.