Polymer 中的数据绑定 - 正在从绑定对象中删除函数答案

【问题标题】：Data binding in Polymer - function is being removed from bound objectPolymer 中的数据绑定 - 正在从绑定对象中删除函数
【发布时间】：2015-07-07 10:16:24
【问题描述】：

我遇到了将包含 angular 函数的对象绑定到 Polymer 1.0 的问题。该函数未传递到自定义元素中的目标对象。这是一个简化的代码示例：

自定义元素有一个名为 myprop 的属性：

<script>    
    Polymer({
        is: 'my-custom-element',
        properties: {
            myprop: Object
        },
        attached: function () {
            var x = this.myprop.x;       //this is ok
            this.myprop.myfunc();        //myfunc is not defined!   

        }
    });

</script>

这是 HTML：

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <my-custom-element myprop="{{myobject}}"></my-custom-element>
    </div>
</div>

这里是角度控制器：

<script>
    angular.module("myApp", []).controller("myCtrl", function ($scope) {    
        $scope.myobject= {
          x: 4,
          myfunc: function() {
             //function body
          } 
        }    
    });    
</script>

为什么自定义元素中没有该功能？

【问题讨论】：

如果 {{myobject}} 返回一个对象，这应该可以工作。

标签： javascript angularjs polymer polymer-1.0

【解决方案1】：

如此处所述：https://github.com/Polymer/polymer/blob/3e96425bf0e0ba49b5f1f2fd2b6008e45a206692/PRIMER.md#attribute-deserialization

...传递到聚合物元素中的对象正在通过JSON.stringify，然后是JSON.parse（取决于变量类型）。

函数将被 JSON.stringify 完全剥离 - 只需查看此示例...

console.log( JSON.stringify({x:123,y:function(){ return 123; }}) );
// outputs: {"x":123}

我相信这是源代码中的违规行...

https://github.com/Polymer/polymer/blob/3b0d10b4da804703d493da7bd0b5c22fc6f7b173/src/micro/attributes.html#L232

...附近的 cmets 建议改变这种行为的可能性...

用户可以在 Polymer 元素原型上重写此方法以提供自定义类型的序列化

【讨论】：

感谢您的帮助。我将此标记为答案。虽然我有点困惑，为什么 horacioibrahim 的代码示例表明，当从方程中取出角度时，函数会得到保留。
@StevenSmith 我认为 horacioibrahim 的示例之所以有效，是因为它不是通过属性从外部传入，而是直接绑定到内部属性，可以将其设置为 javascript 可以处理的任何内容。跨度>

【解决方案2】：

你不能像你写的this.myprop.myfunc();那样调用Angular函数我无法解释为什么会这样，但如果你想从 Polymer 调用 Angular 函数，你可以使用 this.fire('nameEvent') 并在 Angular 控制器或运行模块中添加事件监听器，如

document.addEventListener('nameEvent', function() {
//function body  
})

希望对你有所帮助。祝你好运

【讨论】：

感谢您的帮助。

【解决方案3】：

我没有使用 Angular 进行模拟，但我认为 {{myobject}} 可能有问题。只有使用 Polymer 才能正常工作。基本上，我在 my-element 中复制了您的代码，并在我导入它的地方创建了 my-element-two。结果是生命周期中打印的“我的名字”attached。

<link rel="import" href="../polymer/polymer.html">

<dom-module id="my-element">
<script>    
    Polymer({
        is: 'my-element',
        properties: {
            myprop: Object,
        },
        attached: function () {
            var x = this.myprop.x;       //this is ok
            this.myprop.myfunc();        //myfunc is not defined!   
        }
    });
</script>
</dom-module>

<dom-module id="my-element-two">
<template>
    <my-element myprop="{{myobject}}"></my-element>
</template>

<script>    
    Polymer({
        is: 'my-element-two',
        properties: {
            myobject: {
                type: Object,
                value: {
                    x: 4,
                    myfunc: function() {
                        console.log("My name");
                    }
                }
            }
        },
    });

</script>
</dom-module>

<!-- results is print "My name" in the console. -->
<my-element-two></my-element-two>

【讨论】：

感谢您的帮助和花时间制作此示例。