Durandal JS 프레임 워크에서 JQuery를 추가하여 실행 Novock을 사용하여

Question

ViewModel에서 JQuery 코드를 실행하고보기에서 코드를 실행하는 데 어려움이있다. 환경은 Durandal JS 프레임 워크를 사용하여 실행됩니다. 불행히도 간단한 alert('Hello?')에서 60 초 타이머 실행에 이르는 모든 것이 작동하지 않습니다. 타이머는 59:59에 그대로 있습니다. JQuery 코드가 작동/실행 중입니다. 단순하지도 않다 $('h1').css('color','red');.

Durandal/Knockout보기에서 JQuery를 어떻게 실행합니까? 다음은 내보기에서 작업하려고하는 피쳐 타이머의 예입니다.

shell.html
이 타이머는 리셋 버튼과 글 아래에서 발견된다.

<div class="wrapper"> 

    <!-- navigation --> 
    <nav> 
     <div class="container">...</div> 
    </nav> 
    <!-- end: navigation --> 


    <!-- body --> 
    <div class="container page-host" data-bind="router: { transition:'entrance' }"></div> 
    <!-- end: body --> 


    <!-- footer --> 
    <footer> 
     <div class="container"> 
      <div class="row"> 

       <div class="col-xs-12">...</div> 

      </div> 
     </div> 
    </footer> 
    <!-- end: footer --> 


    <!-- timer --> 
    <div class="timer affix-top" data-spy="affix" data-offset-top="50"> 
     <span id="countdown">59:59</span> 
     <p id="reset" tabindex="0"> 
      <strong class="hidden-sm hidden-xs">Click here to reset timer</strong> 
      <strong class="hidden-lg hidden-md">Reset timer</strong> 
     </p> 
    </div> 
    <!-- end: timer --> 

</div> 

shell.js는
JQuery와 코드는 여기에 갈 필요하지만, 내가 해봤 모든 작동하지 않습니다. 아래 타이머를 실행하는 JQuery 코드입니다.

define(['plugins/router', 'durandal/app'], function (router, app) { 
    return { 
     router: router, 
     search: function() { 
      //It's really easy to show a message box. 
      //You can add custom options too. Also, it returns a promise for the user's response. 
      app.showMessage('Search not yet implemented...'); 
     }, 
     activate: function() { 
      router.map([ 

       { route: '', title:'Page Title', moduleId: 'viewmodels/setup', nav: true }, 
       { route: 'setup', moduleId: 'viewmodels/setup', nav: true }, 
       { route: 'review', moduleId: 'viewmodels/review', nav: true } 

      ]).buildNavigationModel(); 

      return router.activate(); 
     } 
    }; 
}); 

jQuery 코드 (60 초 타이머)
이 내가 페이지에 타이머를 표시 shell.js에 삽입하기 위해 노력하고있어 코드입니다.

// TIMER: COUNTDOWN FROM 60 MINUTES WHEN PAGE IS LOADED 

$(document).ready(function() { 

    function countdown(element, minutes, seconds) { 

    var time = minutes * 60 + seconds; // CREATE VARIABLE: SET TO 60 MINUTES (FOR ONE HOUR) 
    var interval = setInterval(function() { 

     var el = document.getElementById(element); 

     $('#timer_ok, #timer_cancel, #dialog_overlay').on('click keypress', function() { 
     $('#dialog').fadeOut(300); 
     $('#dialog_overlay').fadeOut(300); 
     }); 

     $(document).keyup(function(e) { 

     // WHEN CLICKING "ESC" KEY CLOSE DIALOG WINDOW 
     if (e.keyCode == 27) { 
      $('#dialog').fadeOut(300); 
      $('#dialog_overlay').fadeOut(300); 
     } 
     }); 

     // WHEN CLICKED, RESET THE TIMER... 
     $("#reset").on('click keypress', function() { 
     time = 3600; // SET TIME TO 60 MINUTES 
     }); 

     var minutes = Math.floor(time/60); 
     if (minutes < 10) minutes = "0" + minutes; 

     var seconds = time % 60; 
     if (seconds < 10) seconds = "0" + seconds; 

     var text = minutes + ':' + seconds; 
     el.innerHTML = text; 
     time--; 

    }, 1000); 
    } 

    countdown('countdown', 60, 00); // START THE TIMER INSIDE THE ELEMENT ('ID', MINUTES, SECONDS) 

}); 

main.js
우리는 플러그인을 실행 RequireJS를 사용하고 있습니다. shell.js 파일에서 JQuery를 호출하는 방법을 결정할 때 필요하다면 이것을 추가하십시오.

requirejs.config({ 
    paths: { 
     'text': '../vendor/require/text', 
     'durandal':'../vendor/durandal/js', 
     'plugins' : '../vendor/durandal/js/plugins', 
     'transitions' : '../vendor/durandal/js/transitions', 
     'knockout': '../vendor/knockout/knockout-3.4.0', 
     'bootstrap': '../vendor/bootstrap/js/bootstrap', 
     'jquery': '../vendor/jquery/jquery-1.9.1' 
    }, 
    shim: { 
     'bootstrap': { 
      deps: ['jquery'], 
      exports: 'jQuery' 
     } 
    } 
}); 

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'bootstrap'], function (system, app, viewLocator) { 
    //>>excludeStart("build", true); 
    system.debug(true); 
    //>>excludeEnd("build"); 

    app.title = 'EV-CIS: Defects and Recalls Reporting'; 

    app.configurePlugins({ 
     router:true, 
     dialog: true 
    }); 

    app.start().then(function() { 
     //Replace 'viewmodels' in the moduleId with 'views' to locate the view. 
     //Look for partial views in a 'views' folder in the root. 
     viewLocator.useConvention(); 

     //Show the app by setting the root view model for our application with a transition. 
     app.setRoot('viewmodels/shell', 'entrance'); 
    }); 
}); 

도와주세요.

Answer 1

Lifecycle Callback을 사용하여 DOM 준비가 완료 될 때까지 후킹하려는 모든 jquery 기능을 추가 할 수 있습니다.

define(['plugins/router', 'durandal/app'], function (router, app) { 
    return { 
     router: router, 
     search: function() { }, 
     activate: function() { }, 
     compositionComplete: function() { 
      // keep the click, keyup, keypress handlers here, outside setInterval 
      var minutes = 60, seconds = 0; 
      var time = minutes * 60 + seconds; 

      var interval = setInterval(function() { 

       var el = document.getElementById("countdown"); 

       var minutes = Math.floor(time/60); 
       if (minutes < 10) minutes = "0" + minutes; 

       var seconds = time % 60; 
       if (seconds < 10) seconds = "0" + seconds; 

       var text = minutes + ':' + seconds; 
       el.innerHTML = text; 
       time--; 

      }, 1000); 

     } 
    }; 
}); 

넉 아웃은 keyup 및 click 바인딩을 가지고있다. 따라서 jquery 이벤트 핸들러 대신 사용할 수 있습니다.