如何使用wp.template,WordPress的Underscore.js模板方法

如何使用wp.template,WordPress的Underscore.js模板方法

像许多开发人员机构一样,我们有一些不同的受众群体,包括客户(当前和潜在)和其他开发人员。我们的目标是为拥有广泛技术知识的所有受众提供服务。即使您不是专业的开发人员,我们也知道许多人仍然在自己的网站上使用自己的技术进行教育,并且我们希望为您提供帮助!如果有我们不了解的内容(或者您希望看到与WordPress相关的任何内容,甚至101!),请告诉我们。没有愚蠢的问题。

就是说,让我们开始有趣的事情:WordPress的Underscore.js模板方法 wp.template

如果您还不熟悉,wp.template()那是WordPress核心“ wp-util”脚本提供的一个很棒的JavaScript小实用程序方法。它的核心是使用 Underscorejs .template() 方法。

WordPress使用此实用程序为所有主干视图加载模板,但是使用主干不是必需的。首先,我将演示如何使用 wp.template() 少量jQuery将一些JavaScript数据输出到HTML模板中,然后作为奖励,我们将重新构建 wp.template() 具有某些附加功能的模块。

请记住:这只是一个尽可能简单的示例,而不是您要复制/粘贴到生产代码中的示例。请继续遵循标准的最佳做法,包括将JavaScript放入自己的文件中,避免使用匿名函数,对文本字符串进行国际化等。

默认情况下,该方法需要ID为的脚本标签tmpl-my-template-name。因为所有的WordPress都使用此模板方法/系统,所以您将需要确保正确添加ID前缀,以免与页面上可能加载的其他模板冲突。该脚本标签还应具有“ text/template” 类型。1个

让我们开始吧:

<?php
function zao_item_status_tmpl() {
?>
<script type="text/template" id="tmpl-zao-item-status">
<span class="zao-status" data-id="{{ data.id }}">
<# if ( data.status.name ) { #>
<div class="zao-item-status">
<span class="zao-status-color" style="display: inline-block;background-color:{{ data.status.color }};width:10px; height:10px;"></span>
{{{ data.open }}}
{{ data.status.name }}
{{{ data.close }}}
</div>
<# } else { #>

<# } #>
</span>
</script>
<?php }

因此,现在我们可以使用具有唯一ID的PHP函数准备好合适的脚本模板标记了tmpl-zao-item-status。如您所见,这不是100%标准的HTML。您可以看到我们正在使用基于Mustache启发的数据变量以及Underscorejs逻辑块。

从食典:

WordPress使用定义了自己的插值标签,_.template( options )以避免在某些asp_tags启用了PHP的配置中不兼容。WordPress特定的插值语法受Mustache模板语法的启发:

插值(未转义): {{{ }}}
插值(转义): {{ }}
评估: <# #>
需要理解的重要一点是<# and #>,它表示原始JavaScript输出的打开/关闭,因此您可以执行逻辑运算符之类的操作(如if 上述示例中的语句)。您还可以看到在输出data.open 和data.close 参数时,我们正在利用未转义的插值,因为这些参数将包含HTML,并且我们不希望转义。

在这一点上,让我们进入WordPress,以便我们可以实际看到它。

将此代码段添加到主题的functions.php文件或自定义插件中的某个位置:

<?php
// Output this at the top of the post-edit screen just below the title input.
add_action( 'edit_form_after_title', function() {
?>
<span class="zao-status"><span style="display: inline-block;background-color:red;width:10px; height:10px;"></span> Please wait...</span>
<?php
} );

如果转到新帖子或编辑后的屏幕,应该会看到以下内容:

这对我们没有多大帮助。我们将需要一些JavaScript设置来获取更新的状态并更新状态标记。为简化起见,我们将通过设置短暂的延迟来简单地伪造AJAX请求。您还可以使用Zao Mock API之类的东西 来模拟一些API请求/响应。

JavaScript:

<?php
function zao_item_status_js() {
?>
<script type="text/javascript">
// Wait for the dom to be ready..
jQuery( function( $ ) {
// Get the template function corresponding to our template markup.
var template = wp.template( 'zao-item-status' ); // uses script tag ID minus "tmpl-"
// Let's wait a tick, so we can see it go from yellow to green.
setTimeout( function() {
// Let's fake some data (maybe this is data from an API request?)
var tmplData = {
id: 1,
status: {
name: 'Success!',
color: 'green'
},
open: '<span class="status-name" style="color:green">',
close: '</span>'
};
// Send the data to our new template function, get the HTML markup back.
var html = template( tmplData );
// Now let's replace the contents of the existing markup with our updated template markup.
$( '.zao-status' ).html( html );
}, 1000 );
});
</script>
<?php
}

代码注释应该是不言自明的,但要概括一下:

wp.template() 使用我们之前创建的脚本标签的ID 减去 前缀进行调用tmpl-
通过设置一秒钟的延迟来伪造API请求
生成数据对象,并将其传递给我们的新模板函数,该函数返回已编译的HTML
使用该HTML并替换现有的HTML。
现在,我们在PHP函数中提供了JavaScript输出,可以将其连接到页脚中。我们几乎需要完成所有工作,因此让我们更新edit_form_after_title匿名函数:

<?php
// Output this at the top of the post-edit screen just below the title input.
add_action( 'edit_form_after_title', function() {
// Hook in our template script tag to the footer.
add_action( 'admin_footer', 'zao_item_status_tmpl' );
// Hook in our custom JS for updating the status.
add_action( 'admin_footer', 'zao_item_status_js' );
// Now, enqueue the WP util script so we can use wp.template
wp_enqueue_script( 'wp-util' );
// Make the initial output have a yellow status square
?>
<span class="zao-status"><span style="display: inline-block;background-color:#ffe24d;width:10px; height:10px;"></span> Please wait...</span>
<?php
} );

这样,我们应该看到状态从黄色(“请稍候……”)变为绿色(“成功!”)。

希望这个基本示例可以帮助您开始 wp.template() 在自己的工作中使用,但是如果您有任何疑问,请在下面留下评论。

此示例代码段的完整输出可以在此处找到。

如果您仍然与我在一起:既然我们已经介绍了WordPress实用程序的基础知识,那么您可能会对基于wp.template() 我创建的类似实用程序_templatize感兴趣。该脚本通过结合模板获取和数据发送略微简化了上述步骤,并且还提供了允许通过向模板传递HTML字符串(与tmpl- dom中的script标记绑定)来创建模板的功能。另外,您可以看到上面的代码片段已更新为在此处使用_templatize。

Leave a Reply

Your email address will not be published. Required fields are marked *