找不到Polymer1 1.x行為

Question

我從三天前開始學習Polymer，並且對Polymer Behaviours感到困惑。

如下面的代碼所示，我已經定義了一個Behavior：

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

該表列出了用戶，這些用戶存儲在屬性items 。

看起來您想對國家/地區做些事情（例如顯示過濾的用戶表）？

在這種情況下，將<paper-dropdown-menu>的選定項綁定到屬性，即selectedCountry: {type: String} 。 添加一個函數，該函數返回過濾到所選國家/地區的用戶數組：

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

並將該函數的返回值用作表的數據集。