एक ViewModel में JQuery कोड चलाने और एक दृश्य में कोड निष्पादित करने में कठिनाई हो रही है। पर्यावरण डरंडल जेएस ढांचे का उपयोग करके चलाया जाता है। दुर्भाग्य से, एक साधारण से कुछ भी alert("Hello?") 60-सेकंड टाइमर चलाने के लिए, isn "t वर्किंग। टाइमर सिर्फ 59:59 पर रहता है। JQuery कोड में से कोई भी काम नहीं कर रहा है / चल रहा है। एक साधारण भी नहीं। $("h1").css("color","red");.
मैं ड्यूरंडल / नॉकआउट दृश्य में 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
हम प्लगइन्स को चलाने के लिए आवश्यकताएँ का उपयोग कर रहे हैं। इस मामले में जोड़ना यह निर्धारित करने के लिए आवश्यक है कि शेल में कैसे 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");
});
});
कृपया मदद करे।
उत्तर:
उत्तर № 1 के लिए 1आप इसका उपयोग कर सकते हैं compositionComplete डोम के तैयार होने के बाद आप सभी 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 इवेंट हैंडलर के बजाय उनका उपयोग कर सकते हैं।