Polymer1 1.x行为未被发现

Question

从3天前开始，我就开始学习聚合物，而且我也被聚合物的行为所困扰。

我已经定义了一种行为，如您在以下代码中所看到的：

​

<script>
    BSM._TestBehaviour = {
        properties: {
            language: {
                value: document.documentElement.lang
            },
            /*GetCountries: {
                type: Function,
                computed: '_computeCountries'
            },*/
            fcountries: function () {
                return function(){
                    return ['Catalunya','Andorra'];
                }.bind(this);
            }

        }
    };
    BSM.TestBehaviour = [BSM._TestBehaviour];
</script>

​

在下面的片段中，可以看到使用该行为的组件：

​

<link rel="import" href="test-behaviour.html">
<dom-module id="test-apps">
    <style>
    </style>
    <template>
        <div id="container">
                <paper-input value="{{_defaultUser.FirstName}}"></paper-input>
                <paper-input value="{{_defaultUser.LastName}}"></paper-input>
                <div></div>
                <paper-dropdown-menu class="p50" label="Countries" >
                    <paper-listbox class="dropdown-content" id="countries">
                        <template is="dom-repeat" items="{{fcountries()}}">
                            <paper-item name="[[item]]">[[item]]</paper-item>
                        </template>

                    </paper-listbox>
                </paper-dropdown-menu>
                <div></div>
            </div>
        <iron-data-table id="idt" items="{{GetCountries}}" selection-enabled multi-selection>
            <data-table-column name="Id" >
                <template> {{item.Id}}</template>
            </data-table-column>
            <data-table-column name="FirstName" >
                <template> {{item.FirstName}}</template>
            </data-table-column>
            <data-table-column name="LastName" >
                <template> {{item.LastName}}</template>
            </data-table-column>
            <data-table-column name="FullName" >
                <template> [[_computeFullName(item)]]</template>
            </data-table-column>
            <data-table-column name="Country" >
                <template> [[item.Country]]</template>
            </data-table-column>
        </iron-data-table>
    </template>

    <script>
        BSM.TestApps = Polymer({
            is: 'test-apps',
            behaviours: [BSM.TestBehaviour],
            properties: {
                items: {
                    type: Array,
                    value: function () { return []; }
                },
                _defaultUser: {
                    type: Object
                },
                defaultSelected: {
                    type: Object
                },
                selectedIdCountry: {
                    type: Number
                },
                _newItemlabel: {
                    type: String
                },
                _itemsselected:{
                    type: Array,
                    value: function () {return [];}
                },
                countries:{
                    type: Array,
                    notify: true,
                    //value: function() {return ["Alemanya", "Dinamarca", "Canada"];}
                    //value:  MyBehaviors.TestBehaviour.GetCountries
                }
            },


            ready: function () {
                var countries = this.behaviours[0].properties.GetCountries;
                var users = [
                    {Id:1, FirstName: "Aleix", LastName: "Trasserra", Country: "EEUU"},
                    {Id:2, FirstName: "Maria", LastName: "Garcia", Country: "EEUU"},
                    {Id:3, FirstName: "Anna", LastName: "Tous", Country: "EEUU"},
                    {Id:4, FirstName: "Manel", LastName: "Rodriguez", Country: "EEUU"},
                ];
                this.items = users;

                var defaultUser = {
                    Id: null,
                    FirstName:"",
                    LastName: "",
                    Country:null
                };
                this._defaultUser = defaultUser;
                this.$.idt.addEventListener('selecting-item',this._selectedItem.bind(this));
            },
            _selectedItem: function (e) {
                this.set('_itemsselected', this.$.idt.selectedItems);
            },
            _onAddItem: function () {
                //this.push('items',{Id: 4, text: this._newItemlabel});
                //this.set('_newItemlabel',"");
            },
            _onRemoveSeletedItems: function () {
                this._itemsselected.forEach(e => {
                    var index = this.items.indexOf(e);
                    this.splice('items',index,1);
                })
            },
            _computeFullName: function (item) {
                return item.FirstName + " " + item.LastName;
            }
        })
    </script>
</dom-module>

​

问题是，组件找不到行为中定义的函数“function”。有人能帮我解决这个问题吗？非常感谢!

Answer 1

行为：

/* @polymerBehavior BSM.TestBehaviourImp */ BSM.TestBehaviourImp ={ // implementation }；/* @polymerBehavior BSM.TestBehaviour */ BSM.TestBehaviour = BSM.TestBehaviourImp //，其他包括基本行为；

要素：

...

该表列出了存储在属性items中的用户。

看起来你想对国家做些什么(比如显示一个过滤过的用户表)？

在这种情况下，将选定的<paper-dropdown-menu>项绑定到属性，即selectedCountry: {type: String}。添加一个函数，该函数返回用户数组，过滤到选定的国家：

usersInSelectedCountry()：{返回this.items.filter(用户=> user.Country === this.selectedCountry == null)；}

并使用该函数的返回值作为表的数据集。