Как вызвать функцию JS из шаблона DUST? - PullRequest
Новая
       14

Как вызвать функцию JS из шаблона DUST?

0 голосов
/ 17 октября 2018

У меня есть файл пыли, в который я добавил HTML-код.Теперь я хочу вызвать функцию JS "startCheck ()" для события "onkeyup".Но так как вызов задержан в тегах DUST, я не могу получить доступ к функции JS, которая написана в том же файле, но вне тегов html body.

Резюме - Как я могу вызвать функцию JS из шаблона DUST?Является ли создание помощника единственным решением? 

<script type="text/javascript">
var ns = {}; // a name space
ns.checktimes = 0; // a couter of check times
// the check function
// @param dropdown: the drop-down list of Places.AutoComplete
// @param msg: the div to show message
ns._doCheck = function (dropdown, msg) {
    if (dropdown.style.display == '') {
        msg.innerHTML = 'has results? true';
        ns.checkTimer = null;
    }
    else if (dropdown.style.display == 'none') {
        msg.innerHTML = 'has results? false';
        ns.checkTimer = null;
    } else if (ns.checktimes < 20) { // check at most 10 seconds
        ns.checktimes++;
        ns.checkTimer = setTimeout(function () {
            ns._doCheck(dropdown, msg);
        }, 500);
    }
}
function initialize() {

var input = document.getElementById('searching');
var options = {types: ['(cities)'], componentRestrictions: {country: "us"}};
var autocomplete = new google.maps.places.Autocomplete(input, options);

google.maps.event.addListener(autocomplete, "place_changed", function() {
    $('#stat-boxes').hide();
    var place = autocomplete.getPlace().formatted_address;
    var getcityinfo = $.get('/cities', place).done(function(res){
        res = JSON.parse(res);
        var number_sites = (res[0]["count"]);
        var Min_height = (res[0]["min_height"]);
        var Max_height = (res[0]["max_height"]);
        if( number_sites > 0 ){
            var city = place.slice(0,-5);
            $('#num-locations').text(number_sites);
            $('#location-text').text(city);
            if( Min_height && Max_height ){
                $('#min-max-heights').text(Min_height+"' - "+Max_height+"'");
            } else {
                $('#min-max-heights').text('Not available');
            }
            $('#stat-boxes').fadeIn();
        } else {
            alert('No results');
        }
        /* Things to consider:
            1. What do we do if we dont have heights(Min_height & Max_height)?
            2. What do we do if we don't have(number_sites = 0) results?
            3. When and how do we reset the results area - after an initial search result display? 
            4. We need to look into removing the country from ocation text ie: remove USA from 'Houston, TX, USA'
        */
    });
// update stored value
ns.oldValue = document.getElementById('searching').value;
});
}
// to check whether responsee and has results
function startCheck () {
// the input node
var inp = document.getElementById('searching'),
    value = inp.value; // value of input node
if (value && ns.oldValue != value) { // has value and changed, start check
    // drop-down list and message div
    var dropdown = document.getElementsByClassName('pac-container')[0],
        msg = document.getElementById('msg');
    // trick! change style to display='block'
    dropdown.style.display = 'block';
    // update stored value
    ns.oldValue = value;
    // initiate checktimes
    ns.checktimes = 0;
    // clear previous timer if exists
    if (ns.checkTimer)
        clearTimeout (ns.checkTimer);
    ns.checkTimer = setTimeout(function () {
        ns._doCheck(dropdown, msg);
    }, 500);
}
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

{<html_body}
<div class="carousel-wrapper">
    <div class="carousel carousel-slider pic-carousel" style="height: 830px;">
        <div class="over-pic carousel-fixed-item center" style="z-index: 1">
            <div class="carousel-control-prev" id="btnPrev"> </div>
            <div class="carousel-control-next" id="btnNext"> </div>
            <div id="msg">has results? </div>
            <input type="text" id="searching" onkeyup="startCheck();">
...