2

私は、dom-repeat からメソッドを呼び出す必要があるこの状況に直面しています。以下は私のコードです

<template is='dom-repeat' items="[[_dataArray]]" as="rowItem">
     <template is='dom-repeat' items="[[_objectArray]]" as="columnItem">
         <template>
             <span>[[_getColumnItemValue(rowItem, columnItem)]]</span>
         </template>
     </template>
</template>

私の_getColumnItemValueメソッドでは、属性で指定されたキーを持つオブジェクトの値を取得したいと考えていcolumnDataます。

お気に入りrowData[columnData]

_getColumnItemValue: function(rowData, columnData) {
    return rowData[columnData];
}

私の問題は、メソッド_getColumnItemValueが呼び出されていないことです。これを達成するためのより良い方法はありますか？

4

2 に答える 2

0

コードが貼り付けたとおりであれば、<template>タグが多すぎます。

<template is='dom-repeat'>
  <template is='dom-repeat'>
     <span></span>
  </template>
</template>

最も内側のテンプレートを削除する必要があります。の代わりにそれをレンダリングしてい<span>ます。

于 2016-10-15T14:40:59.837 に答える
0

最後に、私はこのことを機能させることができました。この場合は正確ではありませんが、まったく同じロジックを持つ別のプロジェクトです。唯一の変更点は、_objectArray が文字列の配列ではなく、オブジェクトの配列だったことです。したがって、コードは次のようになります。

<template is="dom-repeat" items="{{tableData}}" as="rowData"> <tr> <template is="dom-repeat" items="{{headers}}" as="columnData"> <td> <template is="dom-if" if="{{checkType(columnData, 'check')}}"> <paper-checkbox disabled="{{getAttributeValue(columnData, 'disabled')}}" checked="{{getRowData(rowData, columnData)}}" on-change="checkBoxSelected"></paper-checkbox> </template> <template is="dom-if" if="{{checkType(columnData, 'led')}}"> <led-indicator on="{{!getRowData(rowData, columnData)}}"></led-indicator> <span style="display: none;">{{getRowData(rowData, columnData)}}</span> </template> <template is="dom-if" if="{{checkType(columnData, 'link')}}"> <a href="javascript:void(0)" on-click="tableRowClicked">{{getRowData(rowData, columnData)}}</a> </template> <template is="dom-if" if="{{checkType(columnData, 'text')}}"> <span>{{getRowData(rowData, columnData)}}</span> </template> </td> </template> </tr> </template>

メソッドを見るgetRowData

getRowData: function (row, column) { return row[column.key]; }, と

checkType: function (columnData, type) { var isType = false; isType = columnData.type.toLowerCase() == type.toLowerCase(); return isType; },

これは、行と列を動的に追加または削除し、テキスト、リンク、チェックボックスなどのさまざまなタイプの要素を表示できるテーブル用です。led-indicator などのカスタム コントロールの一部です。

背後にあるロジックは、ヘッダー配列を使用してテーブル列を生成し、この配列には構造体のオブジェクトが含まれています

{ name: 'Popular Name', key: 'PopularName', type: 'text' }

テーブルデータには、ヘッダー配列で指定されたキーを含むオブジェクトの配列が含まれています。これが誰かにとって役立つことを願っています。

于 2016-12-19T07:16:39.737 に答える