2016-05-05 4 views
0

Я реализую JQuery цепочку - с помощью прикован плагина Mika Tuupola в - в моем проекте рельсы (с использованием вложенных form_for обертонов) и необходимо динамически изменять атрибут СЦЕПЛЕНИЯ:замены JQuery/JavaScript «Ошибка синтаксиса, непризнанное выражение»

код, который работает без замены:

$(".employee_title_2").remoteChained({ 
    parents : ".employee_title_1", 
    url : "titles/employee_title_2", 
    loading : "Loading...", 
    clear : true 
}); 

атрибуты подставляются являются .employee_title_1 и .employee_title_2:

var t2 = new Date().getTime(); 
var A1 = ".employee_title_1A_" + t2; 
var B2 = ".employee_title_2B_" + t2; 

В рубине говорите, я меняю имена переменных, добавляя дату и время.

Вот код, я использую для замещения на лету:

$(`"${B2}"`).remoteChained({ 
    parents : `"${A1}"`, 
    url : "titles/employee_title_2", 
    loading : "Loading...", 
    clear : true 
}); 

Что выдает эту ошибку:

Uncaught Error: Syntax error, unrecognized expression: 
    ".employee_title_2B_1462463848339" 

Проблема, как представляется, быть ведущим ". Как мне избежать этого, предполагая, что это проблема? Исследование сообщения об ошибке Syntax error, unrecognized expression приводит к вопросу SO # 14347611 - который предполагает, что строка считается только HTML, если она начинается с символа меньше ('<) «К сожалению, я не понимаю, как реализовать решение. Мои навыки javascript слабы!

Кстати, в то время как new Date().getTime(); не в формате дата, она работает для моей цели, то есть, он увеличивает, как новые вложенные поля формы добавляются к странице

Заранее спасибо за помощь.

+0

Является кодом, который вы используете для замены «на лету» в файле .js или шаблоне .js.erb? Или что-то еще? –

+0

Это между '

1

Спинки тик (``) синтаксис является новым для Javascript, и предоставляет функцию шаблонной, подобную тому, как рубин обеспечивает интерполированные строки. Например, этот код Javascript:

var who = "men"; 
var what = "country"; 
var famous_quote = `Now is the time for all good ${who} to come to the aid of their #{what}`; 

интерполируется в точно так же, как этот Рубиновый код:

who = "men" 
what = "country" 
famous_quote = "Now is the time for all good #{who} to come to the aid of their #{what}" 

В обоих случаях, цитата заканчивается чтение, "Now is the time for all good men to come to the aid of their country". Аналогичная особенность, несколько иной синтаксис.

Переходя к селекторам jQuery, у вас есть определенная гибкость в том, как вы их определяете.Например, этот код:

$(".my_class").show(); 

функционально эквивалентен следующему коду:

var my_class_name = ".my_class"; 
$(my_class_name).show(); 

Это великая вещь, потому что это означает, что вы можете сохранить имя JQuery селекторы переменных и использовать их вместо того, чтобы требовать строковые литералы. Вы также можете создать их из компонентов, которые вы найдете в этом примере:

var mine_or_yours = (user_selection == "me") ? "my" : "your"; 
var my_class_name = "." + mine_or_yours + "_class"; 
$(my_class_name).show(); 

По сути, это поведение, которое вы пытаетесь получить работу. Используя две функции вместе (интерполяция и динамических селекторов JQuery), у вас есть это:

$(`"${B2}"`).remote_chained(...); 

, который производит этот код через интерполяции строк:

$("\".employee_title_2B_1462463848339\"").remote_chained(...); 

, которая не является правильным. и на самом деле является причиной сообщения об ошибке из jQuery из-за встроенных двойных кавычек в значении строки. jQuery специально жалуется на дополнительные двойные кавычки, окружающие значение, которое вы передаете селектору.

То, что вы на самом деле хотите эквивалент этого:

$(".employee_title_2B_1462463848339").remote_chained(...); 

, которые могут быть написаны так:

$(`${B2}`).remote_chained(...); 

или, гораздо более просто и переносимым, например, так:

$(B2).remote_chained(...); 

Попробуйте этот небольшой пример кода, чтобы доказать его эквивалентность:

if (`${B2}` == B2) { 
    alert("The world continues to spin on its axis..."); 
} else if (`"${B2}"` == B2) { 
    alert("Lucy, you've got some 'splain' to do!"); 
} else { 
    alert("Well, back to the drawing board..."); 
} 

Итак, мы установили эквивалентность интерполяции исходным строкам. Мы также установили эквивалентность буквенных селекторов jQuery для динамических селекторов. Теперь пришло время объединить эти методы в исходный контекст кода.

Попробуйте вместо версии интерполяции:

$(B2).remoteChained({ 
    parents : A1, 
    url : "titles/employee_title_2", 
    loading : "Loading...", 
    clear : true 
}); 

Мы уже знаем, что $(B2) вполне приемлемый динамический селектор JQuery, так что работает. Значение, переданное в ключ parents в хэшеле remoteChained, просто требует строки, а A1 уже соответствует счету, поэтому нет необходимости вводить интерполяцию в этом случае.

Реально, ничего об этом не связано с цепочкой; это просто оказывается включенным в утверждение, которое терпит неудачу. Таким образом, это означает, что вы можете легко изолировать неисправный код (создание и использование селекторов jQuery), что значительно облегчает отладку.

Обратите внимание, что синтаксис Javascript был кодифицирован только в прошлом году с ECMAScript версии 6, поэтому поддержка для него по-прежнему представляет собой смешанный пакет. Проверьте свою поддержку браузера, чтобы убедиться, что вы можете использовать ее надежно.

+0

Благодарим вас за объяснение и примеры. Я полагаю, однако, что вы не читали мой ответ на andirc (ниже). Хотя ваш ответ правильный, интерполяция/подстановка, это не то, что мне нужно, чтобы связать работу с плагином JQuery Chained от Mika Tuupola. – user3763682

+0

Я прочитал комментарий, прежде чем отправил этот ответ. Вы сказали, что ваш «код» нужен как «.». и "" (двойные кавычки), чтобы предотвратить вышеупомянутую ошибку ". Мой ответ был сфокусирован на объяснении, почему удаление интерполяции Javascript приведет к исправлению ошибки jQuery, которую вы получаете. В селекторе jQuery происходит ошибка «Неисправная ошибка: ошибка синтаксиса, нераспознанное выражение», и она легко воспроизводится. Если вы исправите селектор, как я описал, вы, по крайней мере, будете продолжать работать с цепочкой. –