Question

我正在使用wordpress，并且正在使用代码在我的网站上工作这是我的JS

import $ from 'jquery';
    class MyNotes {
     constructor(){
         this.events();
           }

events(){
    $("#my-notes").on("click", ".delete-Note", this.deleteNote);
    $("#my-notes").on("click", ".edit-note", this.editNote.bind(this));
    $("#my-notes").on("click", ".update-note", this.updateNote.bind(this));
    $(".submit-note").on("click",  this.createNote.bind(this));
}

// Methods will go here
editNote(e){
    var thisNote= $(e.target).parents("li");
    if(thisNote.data("state") == "editable"){
        this.makeNoteReadOnly(thisNote);

    }else{
        this.makeNoteEditable(thisNote);
    }

}

makeNoteEditable(thisNote){
    thisNote.find(".edit-note").html('<i class="fa fa-times" aria-hidden="true"></i>Cancel');
    thisNote.find(".note-title-field, .note-body-field").removeAttr("readonly").addClass("note-active-field");
    thisNote.find(".update-note").addClass("update-note--visible");
    thisNote.data("state","editable");

}

makeNoteReadOnly(thisNote){
    thisNote.find(".edit-note").html('<i class="fa fa-pencil" aria-hidden="true"></i>Edit');
    thisNote.find(".note-title-field, .note-body-field").attr("readonly","readonly").removeClass("note-active-field");
    thisNote.find(".update-note").removeClass("update-note--visible");
    thisNote.data("state","cancel");
}

deleteNote(e){
 var thisNote= $(e.target).parents("li");
    $.ajax({
      beforeSend: (xhr) => {
        xhr.setRequestHeader('X-WP-NONCE', myData.nonce);
      },    
      url: myData.root_url + 'wp-json/wp/v2/note/' + thisNote.data('id'),
      type: 'DELETE',
      success: (response) =>{
        thisNote.slideUp();
        console.log("Congrats");
        console.log(response);
      }, 
      error: (response) => {
        console.log("Sorry");
        console.log(response);
      }
    });

}
updateNote(e){
 var thisNote= $(e.target).parents("li");

var ourUpdatedPost = {
    'title': thisNote.find(".note-title-field").val(),
    'content': thisNote.find(".note-body-field").val()
}

    $.ajax({
      beforeSend: (xhr) => {
        xhr.setRequestHeader('X-WP-NONCE', myData.nonce);
      },    
      url: myData.root_url + 'wp-json/wp/v2/note/' + thisNote.data('id'),
      type: 'POST',
      data: ourUpdatedPost,
      success: (response) =>{
        this.makeNoteReadOnly(thisNote);
        console.log("Congrats");
        console.log(response);
      }, 
      error: (response) => {
        console.log("Sorry");
        console.log(response);
      }
    });

}
createNote(e){
var ourNewPost = {
    'title': $(".new-note-title").val(),
    'content': $(".new-note-body").val(),
    'status': 'publish'
}

    $.ajax({
      beforeSend: (xhr) => {
        xhr.setRequestHeader('X-WP-NONCE', myData.nonce);
      },    
      url: myData.root_url + 'wp-json/wp/v2/note/' ,
      type: 'POST',
      data: ourNewPost,
      success: (response) =>{
        $(".new-note-title, .new-note-body").val('');
        $(`
            <li data-id="${response.id}">
            <input readonly class="note-title-field" value="${response.title.raw}">
            <span class="edit-note"><i class="fa fa-pencil" aria-hidden="true"></i>Edit</span>
            <span class="delete-note"><i class="fa fa-trash-o" aria-hidden="true"></i>Delete</span>
            <textarea readonly class="note-body-field">${respose.content.raw}</textarea>
      <span class="update-note btn btn--blue btn--small"><i class="fa fa-arrow-right" aria-hidden="true"></i>Save</span>
        </li>   
            `).prependTo("#my-notes").hide().slideDown();

        console.log("Congrats");
        console.log(response);
      }, 
      error: (response) => {
        console.log("Sorry");
        console.log(response);
      }
    });

}}

export default MyNotes;

这是我声明myData的函数

  function my_files() {
 wp_localize_script('my_main_js', 'myData', array(
 'root_url' => get_site_url(),
 'nonce' => wp_create_nonce('wp_rest')
 ));
 wp_enqueue_style ('my_styles_bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
 wp_enqueue_style('my_styles', get_stylesheet_uri(), NULL, microtime());
 wp_enqueue_script('my_main_js_bootstrap', get_template_directory_uri() . 
 '/js/bootstrap.min.js',array('jquery'),'1.0', true);
wp_enqueue_script('my_main_js', get_theme_file_uri('/js/scripts-bundled.js'),NULL,microtime(), true);
wp_enqueue_style('font_website','//fonts.googleapis.com/css? 
family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
wp_enqueue_style('font_icons','//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
awesome.min.css');


 }
add_action('wp_enqueue_scripts', 'my_files');

这是我在控制台上收到的错误未捕获的ReferenceError：未定义myData MyNotes.createNote（MyNotes.js：119） HTMLSpanElement.dispatch（jquery.js：5237） HTMLSpanElement.elemData.handle（jquery.js：5044）

Answer 1

我应该把wp_localize_script放在底部。

function my_files() { 
wp_enqueue_style ('my_styles_bootstrap', get_template_directory_uri() . 
'/css/bootstrap.min.css');
wp_enqueue_style('my_styles', get_stylesheet_uri(), NULL, microtime());
wp_enqueue_script('my_main_js_bootstrap', get_template_directory_uri() . 
'/js/bootstrap.min.js',array('jquery'),'1.0', true);
wp_enqueue_script('my_main_js', get_theme_file_uri('/js/scripts- 
bundled.js'),NULL,microtime(), true);
wp_enqueue_style('font_website','//fonts.googleapis.com/css? 
family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
wp_enqueue_style('font_icons','//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
awesome.min.css');
wp_localize_script('my_main_js', 'myData', array(
'root_url' => get_site_url(),
'nonce' => wp_create_nonce('wp_rest')
));
}
add_action('wp_enqueue_scripts', 'my_files');

为什么会出现Uncaught ReferenceError错误：未定义myData？

1 个答案: