Polymer1 1.x 未找到行为

Question

我从 3 天前开始学习 Polymer，但我一直坚持使用 Polymer Behaviours。

我已经定义了一个行为，您可以在以下代码中看到：

<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>

问题是组件没有找到行为中定义的函数"fcountries"。任何人都可以帮我解决这个问题吗？非常感谢！

Answer 1

行为：

/* @polymerBehavior BSM.TestBehaviourImp */
BSM.TestBehaviourImp = {
    // implementation here
};

/* @polymerBehavior BSM.TestBehaviour */
BSM.TestBehaviour = [
    BSM.TestBehaviourImp
    // , other included base behaviors
];

元素：

...
<iron-data-table id="idt" items="{{items}}" selection-enabled multi-selection>
...

table 列出用户，这些用户存储在属性 items.

您似乎想对国家/地区做点什么（比如显示经过过滤的 table 用户）？

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

usersInSelectedCountry(): {
    return this.items.filter(user => user.Country === this.selectedCountry || this.selectedCountry == null);
}

并使用该函数的 return 值作为 table 的数据集。

Polymer1 1.x 未找到行为

Polymer1 1.x Behaviour Not Found

javascript

html

polymer-1.0