Question

我不明白为什么函数goToProfile（otherUserId）未定义＆＃39;只是有些时候。

例如，在页面上，我有一个指向用户的链接，该用户使用＆＃39; .userProfileLink＆＃39;点击事件。

 <%= link_to image_tag(user.avatar.url(:medium)), "/profile/#{user.id}/view", class: "userProfileLink", :"value" => user.id, remote: true %>

然后我点击呈现此把手模板的#requestMeeting：

<script id="request-meeting-form" type="text/x-handlebars-template">


    <form id="requestMeetingForm">
        <div class="form_section">

            <h4 style="text-align:center;">Request 1 Hour Meeting</h4>
            <br>
            <div class="wrapper_input col_8_of_16">

                <h4 class="label_standard">Date</h4>

                <input type="text" id="meeting_date" class="input_standard datePicker" onfocus="this.blur()"></input>

                <input type="hidden" id="alt_meeting_date" class="input_standard datePicker"></input>

            </div>

            <div class="wrapper_input col_4_of_16">

                <h4 class="label_standard">Start Time</h4>          
                <input type="text" id="meeting_time" class="input_standard time_picker" onfocus="this.blur()"></input>

            </div>


        </div>

        <div class="form_section">


        <div class="wrapper_input">
            <a href="#" type="button" id="suggestedLocations" class="btn_secondary" >Find a place to meet <svg class="chat"><use xlink:href="#map"/></use></svg></a>
        </div>
            <br>
            <div class="wrapper_input col_8_of_16">
                <input type="text" name="location" id="locationField" placeholder="Location Name" class="input_standard" ></input>
            </div>{{!--  
            --}}<div class="wrapper_input col_8_of_16">
                <input type="text" name="location_address" id="addressField" placeholder="Location Address" class="input_standard"></input>
            </div>


            <input type="hidden" id="currentUser"></input>


        </div>

            <div id="mapLocation">

        </div>
       **************** IMPORTANT PART *********************

        <div class="form_section submit_cancel">
             <div class="wrapper_input cancel" >
                <a href='#' class="link_cancel" id="goToProfile" value={{userId}}>Cancel<svg class="meeting_cancel"><use xlink:href="#circleClose"/></svg></a>
             </div>

           ********************************************
            <div class="wrapper_input submit">
               <div class="actions">
                <button type="submit" class="btn_primary" id="requestMeetingButton" >Request Meeting <svg class="" ><use xlink:href="#sendPlane"/></svg></button>
               </div>

            </div>
        </div>
    </form>


</script>

当我尝试在上面的模板中再次调用goToProfile时，我收到一个错误，即没有定义goToProfile。

的application.js：

$(document).on('click', '#goToProfile', function(e) {
        e.preventDefault();
        var value = $(this).attr('value')
        var otherUserId = parseInt(value);
        $('#profileSection').empty();
        goToProfile(otherUserId);
});


var ready;

ready = function(){


        var currentUserId;
        getCurrentUser().done(function() {
              var currentUserId = currentUserId
        });

        $('.userProfileLink').click(function(e) {
            var value = $(this).attr('value')
            otherUserId = value;
            goToProfile(otherUserId);

        });



        var profileSource = $("#user-profile").html();
        var compiledProfile = Handlebars.compile(profileSource);

        var languageSource = $("#languages").html();
        var compiledLanguage = Handlebars.compile(languageSource);
        var language = ""

        var currentUserId;

        var goToProfile = function(otherUserId) {
            $.ajax({
                url: '/get_user',
                type: 'GET',
                data: {otherUserId: otherUserId},
                success: function(user) {
                     var profileInfo;
                     getUserImage(otherUserId).done(function()  {
                        var profileInfo = {
                            first_name: user.first_name,
                            location: user.location,
                            bio: user.bio,
                            nationality: user.nationality,
                            userId: user.id,
                            userImage: userImage,

                        };
                     var profileTemplate = compiledProfile(profileInfo);
                     $('.yieldedInfo').empty();
                     $('.yieldedInfo').append('<div class="profileContainer">' + profileTemplate + '</div>');
                     });

                    getLanguagesUsers(user.id);

                    $('#requestMeeting').click(function(e)  {
                        e.preventDefault();
                        requestMeetingForm(this.value);

                    });
                },
                error: function(err)    {
                    console.log(err);
                }
            });

         };



         var getLanguagesUsers = function(userId)   {
                $.ajax({
                        url: '/user_languages',
                        type: 'GET',
                        data: {userId: userId},
                        success: function(languages)    {
                            for(var i=0; i<languages.length; i++)   {

                                if(languages[i].level != 5) {
                                     var id = languages[i].language_id
                                     var langUrl = '/languages/'+id;
                                      $.getJSON(langUrl, function(lang) {
                                        var language = lang.language

                                        var languageInfo = {
                                            language: language
                                        };
                                        var languageTemplate = compiledLanguage(languageInfo);
                                        $('#learningLanguages').append(languageTemplate);

                                     });

                                } else {
                                    var id = languages[i].language_id;
                                    var langUrl = '/languages/'+id;
                                    $.getJSON(langUrl, function(lang)   {
                                        var language = lang.language
                                        var languageInfo = {
                                            language: language
                                        };
                                        var languageTemplate = compiledLanguage(languageInfo);
                                        $('#fluentLanguages').append(languageTemplate);
                                     });
                                };
                            };

                        },
                        error: function(err)    {
                            console.log(err);
                        }
                     });
        };




};

$(document).ready(ready);
$(document).on('page:load', ready);

如何让goToProfile（）始终可以调用？谢谢！

Answer 1

您可以通过将click事件处理程序绑定到与其需要调用的函数相同的作用域级别来执行您所需的操作...

var ready = function(){

    $(document).on('click', '#goToProfile', function(e) {
        e.preventDefault();
        var value = $(this).attr('value')
        var otherUserId = parseInt(value);
        $('#profileSection').empty();
        goToProfile(otherUserId);
    });

    // the rest of your ready function goes here

};

如果您这样做，那么事件处理程序可以访问goToProfile函数，因为它们都在ready函数中。该函数之外的任何内容都无法访问其中的私有方法。

从手柄模板

1 个答案: