Polymer 自定义元素 attribute/property 与 .NET MVC Razor 绑定：@DateTime.Now.Year

Question

我正在使用 Polymer/WebComponentsJS/.NET MVC

到目前为止，我对他们有很好的体验，今天早上我坐下来写教程，我从一个非常基本的例子开始。然而，我做的第一个绑定让我在砖墙上。有人可以解释这段代码发生了什么以及为什么它不绑定数据。这是一个非常基本的自定义元素，有一个属性 "currentyear"。标记直接取自 visual studio 中的 ASP.NET MVC 模板，并放置在这个自定义元素 html 文件中。

<dom-module id="my-footer">

<template>
    <style>
        /* CSS rules for your element */
    </style>

    <!-- local DOM for your element -->
    <!-- data bindings in local DOM -->
<footer>
    <p>&copy; {{currentyear}} - My Footer Version 1</p>
</footer>
</template>

<script>
    // element registration
    Polymer({
        is: "my-footer",

        // add properties and methods on the element's prototype
        properties: {
            // declare properties for the element's public API
            currentyear: String
        },
        //builtin functions of custom element lifecycle
        created: function () {
            console.log(this.localName + '#' + this.id + ' was created');

        },

        attached: function () {
            console.log(this.localName + '#' + this.id + ' was attached');
            this.async(function () {
                // access sibling or parent elements here
                // THIS WORKS and displays value in console
                console.log(this.localName + '#' + this.id + ' current year is: ' + this.currentyear);
            });
        },

        detached: function () {
            console.log(this.localName + '#' + this.id + ' was detached');
        },

        attributeChanged: function (name, type) {
            console.log(this.localName + '#' + this.id + ' attribute ' + name + ' was changed to ');
        },

        ready: function (){
            console.log('on READY the value of current year property is: ' + this.currentyear);
        }

    });
</script>

<my-footer currentyear="@DateTime.Now.Year"></my-footer>

在写这篇文章时 post 我解决了我的问题，但仍然不明白为什么它没有与原始标记绑定。

我更改了 html 标记：

  <footer>
    <p>&copy; {{currentyear}} - My Footer Version 1</p>
</footer>

对此：

<footer>
 <p><span>&copy;</span> <span>{{currentyear}}</span><span> - My Footer Version 1</span></p>
</footer>

成功了！在转向 Whosebug 寻求一些输入之前，我至少有一个小时的时间花在一遍又一遍地检查我的代码上。

我试过了，它也有效：

<p>&copy; <span>{{currentyear}}</span>  - My Footer Version 1</p>

Answer 1

Polymer 文档中有一条微妙的注释指出：

The binding annotation must currently span the entire content of the tag

这就是为什么像您一样添加包装元素确实解决了问题。根据我的发现，Polymer 甚至不允许在标签和绑定表达式之间使用白色 space。

Polymer 自定义元素 attribute/property 与 .NET MVC Razor 绑定：@DateTime.Now.Year

Polymer custom element attribute/property binding with .NET MVC Razor: @DateTime.Now.Year

html

dom

polymer

polymer-1.0