2013-04-08 1 views
0

바인딩 만들기 바인딩 목록보기 처음 foreach 문처럼 행동 할사용자 정의 녹아웃, 나는 다음과 같이 그 모양 사용자 지정 바인딩을 만들려고하고 jquerymobile 및 녹아웃 사용 (JQuery와 모바일 목록보기 용) foreach는 렌더링

<ul data-bind="listview: observablearray"> 
    <li data-bind="text: text"></li> 
</ul> 

바인딩에 적용한 후 $ (element) .listview() 또는 업데이트의 $ (element) .listview ('refresh')를 적용합니다.

내가 바인딩 foreach는 모방 순진하기 위해 다음과 같은 일을 시도 : 불행하게도

ko.bindingHandlers.listview = { 
    init: function (element, valueAccessor) { 
    var listview = $(element); 
    listview.listview(); 
    }, 
    update: function (element, valueAccessor) { 
    var listview = $(element); 
    setTimeout(function() { 
     listview.html(''); 
     var items = valueAccessor().list; 
     var link = valueAccessor().link; 
     var text = valueAccessor().text; 
     var icon = valueAccessor().icon; 
     $.each(ko.utils.unwrapObservable(items) || [], function (i, item) { 
     var li = $('<li></li>').css({ 
      height: '44px' 
     }) 
     var a; 
     if (link) { 
      a = $('<a href="#"></a>').click(function() { 
      link(item) 
      }); 
      li.append(a); 
     } 
     if (icon) { 
      (a || li).append($('<img />').attr('src', icon(item)).addClass('ui-li-icon')); 
     } 
     if (text) { 
      (a || li).append($('<span></span>').text(item[text])); 
     } 
     listview.append(li); 
     }); 
     listview.listview('refresh') 
    }, 0); 
    } 
}; 

을뿐만 아니라,이 템플릿을 사용하지 않은 가난한 구현했다, 그것은 또한 초기화에 오류를 통해 :

Uncaught TypeError: Cannot read property 'jQuery19101983379740267992' of undefined

미리 감사드립니다.

+1

(http://stackoverflow.com/questions/15702996/jquery -mobile-with-knockoutjs-listview-issue/15717480 # 15717480) 도움이 될 수 있습니다. – gbs

+0

knockout의 내부 동작에 관심이 있지만, 익명의 템플릿을 수동으로 렌더링하는 방법 –

답변

0

바인딩과 함께 내부 녹아웃 바인딩을 호출 할 수 있습니다.

이 경우 작동합니다.

ko.bindingHandlers.listview = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var res = ko.bindingHandlers.foreach.init(element, valueAccessor()['listview']); 
     $(element).listview(); 
     return res; 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var res = ko.bindingHandlers.foreach.update(element, valueAccessor()['listview'], allBindingsAccessor, viewModel, bindingContext); 
     $(element).listview('refresh'); 
     return res; 
    } 
}; 

렌더링 템플릿은 매우 어렵습니다. 내부 템플릿 바인딩을 사용하는 것이 더 좋습니다. 'foreach'바인딩도 그렇게합니다. knockoutjs 코드를보고 어떻게 완료되었는지 확인하십시오. dinamic jQueryMobile의 목록보기와 함께 작업 할 수있는 빠르고 우아한 방법은 모델 변경, 이런 식으로 뭔가에 가입하는 것입니다 나를 위해

0

: 아마도이

viewModel.products.subscribe(function() { 
    jQuery("#productsList").listview("refresh"); 
});