問題描述
我正在調試一個可視化的作曲家插件，在我將 Wordpress 更新為 4.5 之後，我無法弄清楚為什麼它會拋出一個 TypeError 。
控制枱中的錯誤消息：
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
$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();
},
更新：
看起來這可能是 jQuery 的問題。 WordPress 4.5 包括 jQuery 1.12，它修復了允許使用不正確語法運行某些代碼的錯誤。我認為插件代碼必須具有不正確的語法，但直到現在仍然運行。
https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list#post-8271654
最佳解決方案
我能夠解決這個問題。原來我使用的是舊版本的 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()
},
一切都為我工作很好！希望這有助於別人。
次佳解決方案
在 Ben 的答案中嘗試修補程序後，我仍然收到此錯誤：未捕獲 TypeError：無法讀取未定義的屬性’custom’
所以我修改了 composer-view.js 中的 html2 元素，如下所示：
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()
},
第三種解決方案
@Ben 這個工作完美！
原因：在 updatethis 插件後，管理員沒有為 js_composer 插件加載正確的可視化編輯器。
================================================== ===
錯誤：
錯誤：TypeError：$ template.get 不是函數源文件：wp-content /plugins /js_composer_salient /assets /js /dist /backend.min.js？ver = 4.10 行：4047
================================================== ===
解決方案轉到文件/wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js 繞行 4045：
======> 替換代碼============================================= ======
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()
},
======> 替換此代碼======================================
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()
},
第四種方案
注意到代碼沒有被傳遞到 html2element 函數中，但是在調用它的函數中存在 (render)
以下代碼完全糾正了我的問題，我可以加載頁面，添加，克隆，刪除等
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;
},
第五種方案
我使用的主題是 Applay(2.1.3，有點過時) 。我剛剛更新了 WP 和所有的插件到最新版本 (4.5.2)，也來到這個問題。我沒有分析這個組件 (js_composer) 的流程，只是這個”broken” 函數 (這不是真的壞了) 。我意識到 this.template 和 $ template 變得錯誤的對象類型 (需要另一個驗證，除了_.isString(html)) 。我通過添加一個 try& catch 塊如下：
原版的
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();
},
改性
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();
},
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。