Свързване на данни в Polymer - функцията се премахва от обвързания обект

Срещам проблем при свързването на обект, който съдържа функция от 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>

Защо функцията не е налична в персонализирания елемент?


javascript angularjs polymer polymer-1.0
person Steven Smith    schedule 07.07.2015    source източник
comment
Ако {{myobject}} върне обект, това трябва да работи.   -  person horacioibrahim    schedule 07.07.2015

Отговори (3)


arrow_upward
2
arrow_downward

Както е документирано тук: 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

... и коментарите наблизо предлагат възможност за промяна на това поведение...

Потребителите могат да отменят този метод на прототипи на полимерни елементи, за да осигурят сериализация за персонализирани типове

person Billy Moon    schedule 07.07.2015
comment
Благодаря ти за помощта. Отбелязвам това като отговор. Въпреки че съм малко объркан защо примерният код от horacioibrahim предполага, че функцията се запазва, когато angular се извади от уравнението. - person Steven Smith; 07.07.2015
comment
@StevenSmith Мисля, че примерът на horacioibrahim работи, защото не се предава отвън чрез атрибут, а по-скоро е директно обвързан с вътрешно свойство, което може да бъде зададено на всичко, което javascript може да обработва. - person Billy Moon; 08.07.2015

arrow_upward
1
arrow_downward

Не можете да извикате Angular функция, както пишете this.myprop.myfunc(); Не мога да обясня защо е така, но ако искате да извикате Angular функция от Polymer, можете да използвате this.fire('nameEvent') и в Angular контролера или модула за изпълнение добавете слушател на събития като

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

Надявам се това да ви помогне. Късмет

person Maksym Galich    schedule 07.07.2015
comment
Благодаря ти за помощта. - person Steven Smith; 07.07.2015

arrow_upward
1
arrow_downward

Не симулирам с Angular, но мисля, че {{myobject}} може да има проблем. Само с Polymer работи добре. По принцип копирах вашия код в my-element и създадох my-element-two, където го импортирам. Резултатът е „Моето име“, отпечатано в жизнения цикъл attached.

<link rel="import" href="/bg../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>
person horacioibrahim    schedule 07.07.2015
comment
Благодарим ви за помощта и за това, че отделихте време, за да създадете тази проба. - person Steven Smith; 07.07.2015