2014-04-08 6 views
1
나는 요소에 사용자가 클릭, 그것은 그 기록의 세부 정보 페이지로 갈 때 UI, 데이터를 표현하기 위해 JQuery와 모바일 목록을 사용하고

,객체는 녹아웃 JS

페이지 stateManage JS

과 UI에 변화 값이 아닌
PageStateManager = (function() { 
    var viewModels = {}; 

    var changePage = function (url, viewModel) { 
     alert(">>>>>>>> "+ viewModel.runticketNumber()); 
     $.mobile.changePage(url, {viewModel: viewModel}); 
    }; 

    var registerViewModel = function (viewModelName, viewModel) { 
     viewModels[viewModelName] = viewModel; 
    }; 

    var initPage = function(page, newViewModel) { 
     var viewModelName = page.attr("data-viewmodel"); 

     if (viewModelName) { 
      if (newViewModel) { 
       registerViewModel(viewModelName, newViewModel); 
      } 

      // get view model object 
      var viewModel = viewModels[viewModelName]; 

      // apply bindings if they are not yet applied 
      if (!ko.dataFor(page[0])) { 
       ko.applyBindings(viewModel, page[0]); 
       viewModel.errors = ko.validation.group(viewModel); 
       ko.validation.group(viewModel).showAllMessages(false); 
      } 
     } 
    }; 

    var onPageChange = function (e, info) { 
     initPage(info.toPage, info.options.viewModel); 
    }; 

    $(document).bind("pagechange", onPageChange); 

    return { 
     changePage: changePage, 
     initPage: initPage 
    }; 
})(); 

티켓 JS

function RunTicket(jsRunTicket) { 
    var self = this; 
    ko.mapping.fromJS(jsRunTicket, {}, this);  
    self.save = function(){ 
      alert(">>>> " +this.isValid()); 
    } 

목록보기 HTML

<div id="listViewDiv"> 
      <ul data-role="listview"> 
       <!-- ko foreach: tickets --> 
       <li data-bind="click:$root.clickList"> 
        <h2>Ticket No:<span data-bind="text:action"></span></h2> 
        <p>Item <span data-bind="text:deliveryNetworkName"></span></p> 
        <p class="ui-li-aside"><strong><span data-bind="text: runTicketType"></span></strong></p> 
       </li> 
       <!-- /ko --> 
      </ul> 
     </div> 
} 

보기 모델

var viewModel = { 
     clickList : function(val){ 
      var rt = new RunTicket(service.getRunTicket(val.id)); 
      PageStateManager.changePage($("#detailsView"),rt); 
     } 
     seats :[{"action":"SAVE","bsW":null,"date":"2013-12-19T17:11:00","deliveryNetworkName":"XXXXX 7-2932H","runticketNumber":3957,"id":75837},{"action":"SAVE","bsW":null,"date":"2013-12-19T17:11:00","deliveryNetworkName":"XXXXX 7-2932H","runticketNumber":3958,"id":75837}] 
    } 
applyBindings(viewModel,document.getElementById("firstPage")) 

기록은 사람이 여기

+0

[최소 예제] (http://stackoverflow.com/help/mcve)를 jsfiddle/plunker/jsbin으로 만들고이 예제에서 관찰 된 오류를 설명해 주시겠습니까? 예제가 가능한 한 작지만 문제가 계속 표시되는지 확인하십시오. 그러면 문제를 훨씬 쉽게 해결할 수 있습니다. –

+0

안녕하세요, 답변을 주셔서 감사합니다, 내가 예제를 만들었지 만, 제대로 작동하지 않아, 당신이 나를 해결할 수 있다면 정말 고마워. http://jsfiddle.net/uderox/Hpyca/2/ – ExCode

+0

당신은 평범한 자바 스크립트가있다. 코드에 구문 오류가 있습니다. 내가 바이올린을 열면 콘솔에서'예상 된 '}'을 볼 수 있습니다. 또한 사용하려고하는 모든 외부 자바 스크립트 라이브러리는 포함하지 않았습니다. 제발 jsfiddle을 실행 가능하게 만들어주세요. –

답변

2

문제 문제를 발견하는 데 도움이 수 만 사용자가 목록에서 선택한 첫 번째 값을 포함, 사용자의 선택에 따라 있습니다 변경하지 않는 당신이 그 에있는 뷰 모델에 바인딩하여 PageManager에서 ko.applyBindings으로 전화하십시오. 이 후에는 뷰 모델이 변경되지 않습니다. 현재 선택한 병원을 뷰 모델에서 관찰 가능한 속성으로 만들고 페이지 변경 이벤트에서 관찰 가능한 속성 값을 설정하기 만하면됩니다.

jsfiddle을 http://jsfiddle.net/Hpyca/13/에서 찾을 수있는 작동 샘플로 업데이트했습니다.

+0

대단히 고마워, 이제는 잘 작동 – ExCode

+0

, 일반적인 개체로 PageStateManager을 만드는 방법이 있나요?, 모든 바인딩에 사용할 수있는, 나는 이전의 PageStateManager.I에 몇 가지 문제에 직면 해있다. 당신이 나를 일반적인 PageStateManager로 만들도록 인도 해 줄 수 있다면 정말 고마워요. – ExCode

+0

새로운 질문이 있으면 stackoverflow에 새로운 질문을 올려주세요.이 질문/답변과 관련이 있다면 새로운 질문에 대한 링크로 의견을 작성할 수 있습니다. 개인적으로 나에게 연락해야 할 필요가 있다고 생각하면 내 블로그 (내 사용자 프로필의 링크)에서 '연락처'링크를 찾을 수 있습니다. –