Javascript WordPress 4.5 更新后插件抛出 TypeError
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36605420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Plugin throwing TypeError after WordPress 4.5 update
提问by spencer.sm
I'm debugging a visual composer plugin that broke after I updated WordPress to 4.5 and I can't figure out why it is throwing a TypeError.
我正在调试一个可视化作曲家插件，该插件在我将 WordPress 更新到 4.5 后就坏了，我不知道为什么它会抛出 TypeError。
The error message in the console:
控制台中的错误消息：
JQMIGRATE: Migrate is installed, version 1.4.0 load-scripts.php?....
Uncaught TypeError: $template.get is not a function composer-view.js?ver=4.1.1.1:73
The only occurrences of $templateare found in the code below. I understand that this isn't very much context to go off of but, how can I resolve this error?
仅出现$template在下面的代码中。我知道这不是很多上下文，但是，我该如何解决此错误？
/**
* Convert html into correct element
* @param html
*/
html2element: function(html) {
var attributes = {},
$template;
if (_.isString(html)) {
this.template = _.template(html);
$template = $(this.template(this.model.toJSON()).trim());
} else {
this.template = html;
$template = html;
}
_.each($template.get(0).attributes, function(attr) { // **errors on this line**
attributes[attr.name] = attr.value;
});
this.$el.attr(attributes).html($template.html());
this.setContent();
this.renderContent();
},
Update:
更新：
It looks like this might be a problem with jQuery. WordPress 4.5 includes jQuery 1.12 which fixed a bug that allowed certain code to be run with incorrect syntax. I assume that the plugin code must have had incorrect syntax but ran nonetheless until now.
看起来这可能是 jQuery 的问题。WordPress 4.5 包含 jQuery 1.12，它修复了一个错误，该错误允许某些代码以错误的语法运行。我认为插件代码一定有不正确的语法，但仍然运行到现在。
https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list#post-8271654
https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list#post-8271654
回答by Ben
I was able to resolve the issue. Turns out I was using an older version of JS composer. Updating to the newest version broke my site so I tracked down the error and updated the html2elementfunction to
我能够解决这个问题。原来我使用的是旧版本的 JS 作曲家。更新到最新版本破坏了我的网站，所以我追踪了错误并将html2element功能更新为
html2element: function(html) {
var $template, attributes = {},
template = html;
$template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value
}), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
},
All is working well for me again! Hope this helps others.
一切对我来说都很好！希望这对其他人有帮助。
回答by ECC-Dan
I was still getting this error after trying the patch in Ben's answer: Uncaught TypeError: Cannot read property 'custom' of undefined
在尝试 Ben 的回答中的补丁后，我仍然收到此错误：Uncaught TypeError: Cannot read property 'custom' of undefined
So I modified the html2element in composer-view.js as follows:
于是我修改了composer-view.js中的html2element如下：
html2element: function(html) {
var $template, attributes = {},
template = html;
$template = $(template(this.model.toJSON()).trim());
if($template.get(0))
{
_.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value
})};
this.$el.attr(attributes).html($template.html()),
this.setContent(),
this.renderContent()
},
回答by Didierh
@Ben This works perfect!
@Ben 这很完美！
Cause:Admin was not loading the correct visual editor for js_composer plugin after updatethis plugins.
原因：更新此插件后，管理员未为 js_composer 插件加载正确的可视化编辑器。
=====================================================
================================================== ===
Error:
错误：
Error: TypeError: $template.get is not a function Source File: wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js?ver=4.10 Line: 4047
错误：TypeError：$template.get 不是函数源文件：wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js?ver=4.10 行：4047
=====================================================
================================================== ===
SolutionGoto file /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js around line 4045:
解决方案转到文件 /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js 周围 4045 行：
======> Replace the code =====================================================
======> 替换代码 ======================================== ==============
html2element: function(html) {
var $template, attributes = {};
_.isString(html) ? (this.template = _.template(html), $template = $(this.template(this.model.toJSON(), vc.templateOptions["default"]).trim())) : (this.template = html, $template = html), _.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value
}), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
},
======> Replace with this code ========================================
======> 用这个代码替换 ======================================== =
html2element: function(html) {
var $template, attributes = {},
template = html;
$template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value}),
this.$el.attr(attributes).html($template.html()), this.setContent(),
this.renderContent()
},
回答by Amritosh pandey
Noticed that code was not being passed into the html2element function, but did exist in the function calling it (render)
注意到代码没有被传递到 html2element 函数中，但确实存在于调用它的函数中（渲染）
The following code has completely corrected my problems, I can load the page, add, clone, remove, etc
以下代码完全纠正了我的问题，我可以加载页面，添加，克隆，删除等
render: function () {
var $shortcode_template_el = $( '#vc_shortcode-template-' + this.model.get( 'shortcode' ) );
if ( $shortcode_template_el.is( 'script' ) ) {
var newHtmlCode = _.template( $shortcode_template_el.html(),
this.model.toJSON(),
vc.templateOptions.default );
if(!_.isString(newHtmlCode)){
newHtmlCode = $shortcode_template_el.html();
}
this.html2element( newHtmlCode );
} else {
var params = this.model.get( 'params' );
$.ajax( {
type: 'POST',
url: window.ajaxurl,
data: {
action: 'wpb_get_element_backend_html',
data_element: this.model.get( 'shortcode' ),
data_width: _.isUndefined( params.width ) ? '1/1' : params.width,
_vcnonce: window.vcAdminNonce
},
dataType: 'html',
context: this
} ).done( function ( html ) {
this.html2element( html );
} );
}
this.model.view = this;
this.$controls_buttons = this.$el.find( '.vc_controls > :first' );
return this;
},回答by Luciano Fantuzzi
I'm using the theme Applay (2.1.3, a bit outdated). I've just updated WP and all the plugins to the most recent version (4.5.2) and came to this issue as well. I did not analyzed the flow of this component (js_composer), just this "broken" function (it's not really broken). I realized that this.template and $template are getting wrong object types (it needs another validation aside _.isString(html)). I solved it by adding a try & catch block as follows:
我正在使用主题 Applay（2.1.3，有点过时）。我刚刚将 WP 和所有插件更新到最新版本 (4.5.2)，也遇到了这个问题。我没有分析这个组件（js_composer）的流程，只是这个“坏”的函数（不是真的坏了）。我意识到 this.template 和 $template 得到了错误的对象类型（它需要另一个验证_.isString(html)）。我通过添加一个 try & catch 块来解决它，如下所示：
ORIGINAL
原来的
html2element:function (html) {
var attributes = {},
$template;
if (_.isString(html)) {
this.template = _.template(html);
$template = $(this.template(this.model.toJSON()).trim());
} else {
this.template = html;
$template = html;
}
_.each($template.get(0).attributes, function (attr) {
attributes[attr.name] = attr.value;
});
this.$el.attr(attributes).html($template.html());
this.setContent();
this.renderContent();
},
MODIFIED
修改的
html2element:function (html) {
var attributes = {},
$template;
if (_.isString(html)) {
this.template = _.template(html);
} else {
try {
this.template = _.template(html());
} catch (err) {
this.template = html;
}
}
$template = $(this.template(this.model.toJSON()).trim());
_.each($template.get(0).attributes, function (attr) {
attributes[attr.name] = attr.value;
});
this.$el.attr(attributes).html($template.html());
this.setContent();
this.renderContent();
},
回答by Renegade_Mtl
I am using the Astra theme. This fix is 99.9 % working. For some tho, this only stops the spinning wheel, but once the page loads visual composer does not.
我正在使用 Astra 主题。此修复程序 99.9% 有效。对于某些人来说，这只会停止旋转轮，但是一旦页面加载视觉作曲家就不会。
I made a slight change to this code (that is posted everywhere by now)
我对这段代码做了一点改动（现在到处都张贴了）
Original Astra theme code here (composer-view.js)
此处的原始 Astra 主题代码（composer-view.js）
html2element:function (html) {
var attributes = {},
$template;
if (_.isString(html)) {
this.template = _.template(html);
$template = $(this.template(this.model.toJSON()).trim());
} else {
this.template = html;
$template = html;
}
_.each($template.get(0).attributes, function (attr) {
attributes[attr.name] = attr.value;
});
this.$el.attr(attributes).html($template.html());
this.setContent();
this.renderContent();
},
The code that works :
有效的代码：
html2element: function(html) {
var $template,
attributes = {},
template = html;
$template = $(template(this.model.toJSON()).trim()),
_.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value
}); this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
},
},
The main difference is located here (versus original code)
主要区别在这里（相对于原始代码）
}); this.$el.attr
There is a semicolon instead of the original comma :) :
有一个分号而不是原来的逗号 :) ：
}), this.$el.attr
Cheers folks :) So
干杯人:) 所以
回答by Amit Garg
Checkout below code for both $template.get is not a function and Uncaught TypeError: Cannot read property 'attributes' of undefined. Worked for me.
签出下面的代码 $template.get is not a function 和 Uncaught TypeError: Cannot read property 'attributes' of undefined。为我工作。
html2element: function(html) {
var $template, attributes = {},
template = html;
$template = $(template(this.model.toJSON()).trim());
if($template.get(0))
{
_.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value
})};
this.$el.attr(attributes).html($template.html()),
this.setContent(),
this.renderContent()
}
回答by sly63
I made this modification that works on my WP 4.8.1 (PHP7)
我做了这个修改，适用于我的 WP 4.8.1 (PHP7)
in the file wp-content/plugins/js_composer/assets/js/backend/composer-view.js
在文件wp-content/plugins/js_composer/assets/js/backend/composer-view.js 中
you must modify the rendermethod :
您必须修改渲染方法：
replace this line
替换这一行
this.html2element(_.template($shortcode_template_el.html(), this.model.toJSON()));
by this line
通过这条线
this.html2element( $shortcode_template_el.html() );
It seems the _.template() function that doesn't work perfectly and doesn't return the good object, so better give the html code instead.
似乎 _.template() 函数不能完美工作并且没有返回好的对象，所以最好给出 html 代码。
回答by Sebastian Diaz
Well, i found the solution in this site: https://wordpress.org/support/topic/visual-composer-is-not-working
好吧，我在这个站点找到了解决方案：https: //wordpress.org/support/topic/visual-composer-is-not-working
first: edit html2element:.... in in /wp-content/plugins/js_composer/assets/js/backend/composer-view.js
第一：编辑 html2element:.... 在 /wp-content/plugins/js_composer/assets/js/backend/composer-view.js
html2element: function(html) {
var $template, attributes = {},
template = html;
$template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value
}), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()},
second: However if you open up the frontend editor you'll have this "trim" issue on custom_views.js:101 , and line 467 of another file. I forgot the name, but I think it may be frontend_editor.js.
第二：但是，如果您打开前端编辑器，您将在 custom_views.js:101 和另一个文件的第 467 行上遇到此“修剪”问题。我忘记了名字，但我认为它可能是 frontend_editor.js。
edit in: \wp-content\plugins\js_composer\assets\js\frontend_editor\
编辑：\wp-content\plugins\js_composer\assets\js\frontend_editor\
- frontend_editor.js
- custom_views.js
- frontend_editor.js
- custom_views.js
Bad code:
错误代码：
this.$controls = $( _.template( template, data, _.extend( {},
vc.template_options,
{ evaluate: /\{#([\s\S]+?)#}/g } ) ).trim() ).addClass( 'vc_controls' );
Fixed code:
固定代码：
this.$controls = $( _.template( template, data, _.extend( {},
vc.template_options,
{ evaluate: /\{#([\s\S]+?)#}/g } ) )().trim() ).addClass( 'vc_controls' );
third: See the black magic.
第三：看黑魔法。
Cheers.
干杯。
回答by Robert Spencer
try updating your theme. Goto Appearance>Themes, and check for an update. This resolved the issue for me automatically upon update.
尝试更新您的主题。转到外观>主题，然后检查更新。这在更新时自动为我解决了问题。
The error arises when you update to WP 4.5 for me running the Nimva theme. You have to update to 2.02 of Nimva, which allows auto updates.
当您为我运行 Nimva 主题更新到 WP 4.5 时出现错误。您必须更新到允许自动更新的 Nimva 2.02。
