数据高分子结合 - 功能正在从绑定对象中删除 [英] Data binding in Polymer - function is being removed from bound object

问题描述

我现在遇到一个问题，绑定包含从角度到聚合物1.0函数的对象。该功能没有被穿过进入自定义元素目标对象。这里是一个简化的code样品：<​​/ P>

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

 ＆LT;脚本＆GT;
    聚合物（{
        是：我的定制元素'，
        属性：{
            myprop：对象
        }，
        附：功能（）{
            VAR X = this.myprop.x; //还行吧
            this.myprop.myfunc（）; // MYFUNC未定义！        }
    }）;＆LT; / SCRIPT＆GT;
 

下面是HTML：

 ＆LT; D​​IV NG-应用=对myApp＆GT;
    ＆LT; D​​IV NG控制器=myCtrl＆GT;
        ＆LT;我的定制元素myprop ={{MyObject来}}＆GT;＆LT; /我 - 自定义组件＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

这是角控制器：

 ＆LT;脚本＆GT;
    angular.module（对myApp，[]）。控制器（myCtrl功能（$范围）{
        $ scope.myobject = {
          X：4，
          MYFUNC：功能（）{
             //函数体
          }
        }
    }）;
＆LT; / SCRIPT＆GT;
 

为什么不是在自定义元素提供的功能？

解决方案

作为记录在这里：<一href=\"https://github.com/Polymer/polymer/blob/3e96425bf0e0ba49b5f1f2fd2b6008e45a206692/PRIMER.md#attribute-deserialization\" rel=\"nofollow\">https://github.com/Polymer/polymer/blob/3e96425bf0e0ba49b5f1f2fd2b6008e45a206692/PRIMER.md#attribute-deserialization

传递到聚合物元件

...对象正在通过 JSON.stringify 过去了，然后 JSON.parse （根据变量类型）。

职能将由JSON.stringify完全剥离出去 - 只要checkout出来这个样本...

 的console.log（JSON.stringify（{X：123，Y：函数（）{返回123;}}））;
//输出：{×：123}
 

我相信这是源代码出错的行...

<一个href=\"https://github.com/Polymer/polymer/blob/3b0d10b4da804703d493da7bd0b5c22fc6f7b173/src/micro/attributes.html#L232\" rel=\"nofollow\">https://github.com/Polymer/polymer/blob/3b0d10b4da804703d493da7bd0b5c22fc6f7b173/src/micro/attributes.html#L232

...和意见建议附近的可能性，以改变这种行为...

  

用户可以覆盖高分子元素的原型此方法以提供对自定义类型的序列化

I'm encountering an issue binding an object that contains a function from angular to Polymer 1.0. The function is not being passed through into the target object in the custom element. Here is a simplified code sample:

The custom element has a single property named 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>

Here is the HTML:

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

And here is the angular controller:

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

Why isn't the function available in the custom element?

解决方案

As documented here: https://github.com/Polymer/polymer/blob/3e96425bf0e0ba49b5f1f2fd2b6008e45a206692/PRIMER.md#attribute-deserialization

... objects passed into polymer elements are being passed through JSON.stringify and then JSON.parse (depending on variable type).

Functions will be completely stripped out by JSON.stringify - just checkout out this sample...

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

I believe this is the offending line in source...

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

... and comments nearby suggest possibility to change this behavior...

Users may override this method on Polymer element prototypes to provide serialization for custom types

这篇关于数据高分子结合 - 功能正在从绑定对象中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！