2015-01-29 2 views
1

첫 번째로 스택 오버플로에 대한 첫 번째 게시물이며이 커뮤니티에 속한 영광입니다. 도움이 필요해. mvc 및 knockout.js를 사용하고 있습니다. 데이터 목록 개체가있는 모델이 있습니다. 나는 또 하나를 만들고 원본에서 5 개만 선택합니다. 그 이유는 원본 데이터 집합을 필터링하지만 원래 목록의 특정 데이터 만 표시하기 때문입니다.knockout.js 새 데이터 소스 새로 고침 html

var data = @Html.Raw(Json.Encode(Model)); 
self.CartModel = ko.wrap.fromJS(data); 
     self.CartModel.FilteredData = ko.computed(function() { 
      return self.CartModel.OriginalData().slice(0, 5); 
     }, self); 



<div id="NbId" class="listing-style3" data-bind="foreach: Cart.CartModel.FilteredData"> 
         <article class="box"> 
          <figure class="col-sm-5 col-md-4"> 
           <img style="width:270px; height: 160px; " alt="" data-bind="attr:{src:Image}"> 
          </figure> 
          <div class="details col-sm-7 col-md-8"> 
           <div> 
            <div> 
             <img data-bind="attr:{src:RatingUrl}" /> 
            </div> 
           </div> 
           <div> 
            <p data-bind="text: Teaser"></p> 
           </div> 
          </div> 
         </article> 
        </div> 

잘 작동하고 html의 foreach가 잘 렌더링됩니다. 도움이 필요한 것은 서버를 다시 호출하여 새 데이터 소스를 얻는 것입니다. html for-each 부분을 어떻게 다시 렌더링합니까?

CartModel을 위에서 언급 한 것과 같은 방법으로 필터링 된 데이터뿐만 아니라 새로운 데이터 소스로 설정하려고 시도했지만 새 데이터가 있지만 html은 변경되지 않습니다.

$.ajax({ 
      cache: false, 
      type: "POST", 
      contentType: 'application/json; charset=utf-8', 
      url: url, 
      data: requestAvailability, 
      success: function (data) { 
       var response = data.NewData; 
       CartApp.Cart.CartModel = ko.wrap.fromJS(response); 
       CartApp.Cart.CartModel.FilteredData = ko.computed(function() { 
        return CartApp.Cart.CartModel.OriginalData().slice(0, 5); 
       }, CartApp.Cart); 
       //targetDiv.html(); 
       //targetDiv.html(data); 
      } 
      //, error: function (xhr) { 
      // var status = xhr.status; 
      // var responseText = xhr.responseText; 
      // //alert("Error "+ status+" - "+ responseText); 
      //} 
     }); 

나는 녹아웃에 새로운 물건이며 도움이 될 것입니다. 이 관찰에 새 값을 넣어해야 아약스 성공

CartApp.Cart.CartModel = ko.observable(); 

:

CartApp.Cart.CartModel(ko.wrap.fromJS(response)); 
CartApp.Cart.CartModel().FilterdData = ... 

그리고 당신의 바인딩을 변경 사전에 감사

답변

0

당신은 아약스 호출 외부에서 정의 관측 CartModel 필요 마크 업

... foreach: CartApp.Cart.CartModel().FilteredData 

이 경우 사용자는 유일한 observabl e CardModel, knockout은 값을 변경 한 후에 그것을 구독하고 마크 업을 다시 작성합니다.

+0

안녕하세요, 저는 이것을 시도했지만 아약스 호출에서 CartApp.Cart.CartModel (ko.wrap.fromJS (response))을 실행하려고 할 때 호출합니다. 그것은 객체가 속성이나 메서드를 지원하지 않는다고 말합니다. CartModel –

+0

필자가 작성한 것처럼, 아약스 호출 전과 관찰 가능한 CartModel을 정의해야합니다. CartApp.Cart.CartModel = ko.observable(); 그것은 한 번해야합니다. – TSV

+0

나는 그것을 또한했다. 이것은 페이지 상단에 정의되어 있습니다.