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>

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

我改变了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>

它有效！至少花了一个小时的时间来反复检查我的代码，然后转向StackOverflow进行一些输入。

我尝试了这个，它也有效：

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

Answer 1

Polymer docs中有一个微妙的说明：

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

这就是为什么像你一样添加包装元素解决了这个问题。根据我的发现，Polymer甚至不允许标签和绑定表达之间有空格。

使用.NET MVC Razor的Polymer自定义元素属性/属性绑定：@ DateTime.Now.Year

1 个答案: