Wordpress 页面中的聚合物数据绑定答案

【问题标题】：Polymer Data Binding in Wordpress PageWordpress 页面中的聚合物数据绑定
【发布时间】：2017-11-14 13:38:39
【问题描述】：

我已经使用 Polymer 纸张输入元素构建了一个表单作为辅助项目。现在我正在尝试将它集成到我的 Wordpress 网站中。

到目前为止，我已经能够使用在 functions.php 中加载我所有的 bower_component 依赖项

function mytheme_enqueue_polymer() {
    wp_enqueue_script( 'webcomponentsjs', get_stylesheet_directory_uri() . '/bower_components/webcomponentsjs/webcomponents-loader.js' );
}
add_action( 'wp_head', 'mytheme_html_imports' );
function mytheme_html_imports() {
    ?>
    <link rel="import" href="<?php echo get_stylesheet_directory_uri(); ?>/bower_components/polymer/polymer-element.html">

    <link rel="import" href="<?php echo get_stylesheet_directory_uri(); ?>/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
    <link rel="import" href="<?php echo get_stylesheet_directory_uri(); ?>/bower_components/paper-card/paper-card.html">
    <link rel="import" href="<?php echo get_stylesheet_directory_uri(); ?>/bower_components/paper-button/paper-button.html">
    <link rel="import" href="<?php echo get_stylesheet_directory_uri(); ?>/bower_components/iron-form/iron-form.html">
    ...
    <?php } ?>

和我的表单代码

<form is="iron-form" id="form6" method="get" action="http://httpbin.org/get">
  <paper-input name="fname" label="First Name" autocomplete="fname" value="{{fname}}"></paper-input>
  <input type="hidden" name="fname" value={{fname}}>
                ...

纸张输入元素显示正确，但数据绑定工作不正常。我正在尝试绑定 value={{}} 属性，但页面在输入中按字面意思显示 {{value}} 。

我需要做什么才能使数据绑定在 Wordpress 页面或帖子中工作？

【问题讨论】：

标签： wordpress data-binding binding polymer

【解决方案1】：

您使用的是什么聚合物版本？ 1 还是 2？如果是2.0，组件代码应该是：

<iron-form id="form6" on-iron-form-response="_onFormResponse" on-iron-form-error="_onFormError">
    <form method="get" action="http://httpbin.org/get">
        <paper-input name="fname" label="First Name" autocomplete="fname" value="{{fname}}"></paper-input>
        <input type="hidden" name="fname" value={{fname}}>
        ...
    </form>
</iron-form>

【讨论】：