Aggiungi ed esegui JQuery nel framework Durandal JS usando Knockout - jquery, knockout.js, timer, durandal, durandal-2.0

Difficoltà a eseguire codice JQuery in un ViewModel ed esecuzione del codice in una vista. L'ambiente viene gestito utilizzando il framework Durandal JS. Sfortunatamente, tutto da un semplice alert("Hello?") l'esecuzione del timer di 60 secondi non funziona, il timer rimane a 59:59. Nessuno del codice JQuery funziona / è in esecuzione. Nemmeno un semplice $("h1").css("color","red");.

Come posso eseguire JQuery in una vista Durandal / Knockout? Ecco un esempio di un timer di funzionalità che sto cercando di lavorare nella mia vista.

shell.html
Il timer si trova sotto il footer con un pulsante di reset.

<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
Il codice JQuery deve essere inserito qui, ma tutto quello che ho provato non funziona. Di seguito è riportato il codice JQuery per eseguire il timer.

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();
}
};
});

Codice JQuery (60 secondi)
Questo è il codice che sto cercando di inserire in shell.js per visualizzare un timer sulla pagina.

// 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
Stiamo usando RequireJS per eseguire i plugin, aggiungendo questo nel caso in cui sia necessario per determinare come chiamare JQuery nel file shell.js.

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");
});
});

Per favore aiuto.

risposte:

Puoi usare il compositionComplete Callback del ciclo di vita per aggiungere tutte le funzionalità jquery da aggirare dopo che il DOM è pronto.

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);

}
};
});

Knockout ha keyup e click binding. Quindi, puoi usarli al posto dei gestori di eventi jQuery.