document ready var unknow

Question

我使用jquery，bootstrap和把手。 当我点击一个标签时，我会调用一些功能。 在这些函数中，我使用了一些var。

<script>
    $(document).ready(function () {

        var sourceLodgerContactAvailable = $("#lodger-contact-available-result-template").html();
        var templateLodgerContactAvailable = Handlebars.compile(sourceLodgerContactAvailable);


        $("a[href='#lodgerContactTab']").on('shown.bs.tab', function (e) {

            e.target; // newly activated tab
            e.relatedTarget; // previous active tabF

            var location = assignLocationToLocal();
            $.when(location).then(function () {
                getNotAssociateContact();
                getAssociateContact();
            });
        });

    );

    function getNotAssociateContact() {

        $.ajax({
            type: "GET",
            url: "http://localhost:8080/rest/contacts/notassociatedto/" + $("#lodgerId").val(),
            success: function (data, status, jqXHR) {

                $("#lodgerContactAvailableDivTemplate").empty();

                if (data.length != 0) {
                    $("#lodgerContactAvailableDivTemplate").append(templateLodgerContactAvailable(data)); //error
                    $('#lodgerContactAvailableTableResult').bootstrapTable('resetView');
                }
            },
            error: function (jqXHR, status) {
                check401Unauthorized(jqXHR);
            }
        });
    }


</script>

我收到此错误消息。

templateLodgerContactAvailable未定义

这就像函数中未知的var。

我是否需要准备文件中的功能？

Answer 1

尝试从函数

传递变量

$.when(location).then(function () {
            getNotAssociateContact(templateLodgerContactAvailable);
            getAssociateContact();
        });



function getNotAssociateContact(templateLodgerContactAvailable) {
       //your logic goes here

}

或者在document.ready function

之外声明变量

Answer 2

变量设置为其功能范围和任何子范围。

function aFunction() {
  var a = 12;
}

function bFunction() {
  // This won't work because `a` is defined in `aFunction`
  console.log(a);
}

var c = 12;

function cFunction() {
  // Works because `c` is declared outside of this function
  console.log(c);
}

function dFunction() {
  // Works for the same reason as `cFunction`
  console.log(c);
}

因此，如果你想在两个地方都使用那个变量，你应该在$(document).ready的外面声明它，然后在$(document).ready

var templateLodgerContactAvailable;
$(document).ready(function() {
  var sourceLodgerContactAvailable = $("#lodger-contact-available-result-template").html();
  templateLodgerContactAvailable = Handlebars.compile(sourceLodgerContactAvailable);
  ...
});

更好的方法是让getNotAssociateContact获取参数。然后，您可以将该变量传递给getNotAssociateContact。

function getNotAssociateContact(template) {
  // Use `template` instead of `templateLodgerContactAvailable` inside of this function
  ...
}

然后，当您想要调用该函数时，只需将值传递给它。

var sourceLodgerContactAvailable = $("#lodger-contact-available-result-template").html();
var templateLodgerContactAvailable = Handlebars.compile(sourceLodgerContactAvailable);

$("a[href='#lodgerContactTab']").on('shown.bs.tab', function (e) {

  e.target; // newly activated tab
  e.relatedTarget; // previous active tabF

  var location = assignLocationToLocal();
  $.when(location).then(function() {
    getNotAssociateContact(templateLodgerContactAvailable);
    getAssociateContact();
  });
});