1

モバイル スパ アプリの詳細ページから戻ったときにリストビューのスクロール位置を維持するためにスティッキー状態を使用できるように、エクストラで angular と ui-router を使用しています。

私のリストは剣道携帯のリストビューです。私はcrudを実装しており、戻るときにリストビューで行われた変更を反映したいと考えています。戻るボタンで $state.go を使用しませんが、戻るボタンを「期待どおりに」機能させたいので $window.history.back を使用します。そのため、その関数のリロード パラメータを使用できません。

onReactivate を配線し、フラグを持つサービスを挿入して、crud 操作が行われたかどうかを通知し、リストをリロードします。これはすべて機能し、画面をリロードする必要があるかどうかをうまく判断できます。

そこで、kendo.mobile.ui.ListView の更新メソッドを使用してみます。angular.element("#idoflistview").data("kendoMobileListView").refresh() を使用します。それを見つけて更新しますが、すべての項目が style="transform: translate3d(0px, 0px, 0px);" を持つように設定されているため、すべて互いに重なり合っています。

私はもともと $state.reload() を実行してページを再構築しようとしましたが、コントローラーで init 関数を呼び出すという点で機能し、フラグを使用してデータを正しい方法で要求することを知ることができましたが、リストビューは構築されません。データのリクエストが送信され、取得されましたが、リストビューが空でした。

サービスには更新されたデータを含む剣道データソースが既にあるため、可能であればリストを更新することをお勧めします。そのため、データベースを再度呼び出す必要はありません。

そのため、リストビューのセットアップは正常に機能しますが、onReactivate を更新すると壊れるだけで、リスト内のすべての li が 0 から始まるため、互いにオーバーラップします (ただし、更新はそこにあります。リフレッシュしました）。

後で行う必要があるためだと思います。もしそうなら、どうすればそれを行うことができますか?

refresh メソッドを適切に機能させる方法についてのアイデアはありますか? または、これを行うより良い方法はありますか？

抽象ビューは次のとおりです。

<div ui-view="activityinquirylist"  ng-show="$state.includes('activityinquiry.list')"></div>
<div ui-view="activityinquirydetails" ng-show="$state.includes('activityinquiry.details')"></div>
<div ui-view="activityinquirycrud" ng-show="$state.includes('activityinquiry.crud')"></div>

リストビューを宣言する方法は次のとおりです。

<div id="activityListScroller" kendo-mobile-scroller="activityListScroller" k-pull-to-refresh="true" k-pull="vm.pullToRefresh" k-pull-offset="200" class="scroller-header-footer">
    <ul id="activityListView" kendo-mobile-list-view="activityListView" k-data-source="vm.activityInquiryService.activityInqiuryDataSource" k-template="vm.activityTemplate" k-on-click="vm.listClicked(kendoEvent)" k-auto-bind="false" k-load-more="true"></ul>
</div>

状態のコードは次のとおりです。

.state('activityinquiry', {
    //sticky: true,
    abstract: true,
    url: '/activityinquiry',
    templateUrl: 'app/views/cm/activityinquiry.html'
})
.state('activityinquiry.list', {
    url: '/activityinquirylist',
    views: {
        'activityinquirylist@activityinquiry': angularAMD.route({
            templateUrl: 'app/views/cm/activityinquirylist.html',
            controller: 'activityinquirylistController',
            controllerUrl: 'controllers/cm/activityinquirylistController',
            controllerAs: "vm"
        })
    },

    sticky: true,
    deepStateRedirect: false,
    onReactivate: function (activityInquiryService) {
        console.log("reactivating");
        if (activityInquiryService.model.reloadList && activityInquiryService.model.reloadList == true) {
            activityInquiryService.model.reloadList = false;
            var item = angular.element("#activityListView").data("kendoMobileListView");
            if (item) {
                item.refresh();
            }
        }
    }
})

編集: さらに調査した結果、kendo.mobile.scroller が原因であることがわかりました。リストビューを更新している時点では利用できないため、リストビューの描画方法がめちゃくちゃになっています。リストビューはスクローラーの内側にあるため、これは私には意味がありません（後で調べ​​ても同じです）。スクローラーを削除すると、期待どおりに動作しますが、剣道ビューを使用しておらず、ページにフッターがあるため、そのスクローラーが必要です。コンテンツとともにスクロールし、プルを使用してスクローラーの機能を更新しています（リストビューのプルを使用して更新したくないのは、スクローラーが実行しているときに更新が発生する方法を処理できないためです）。

別の編集：リストビューでloadMoreがtrueの場合にのみ発生するという事実まで追跡しました。これをオフにすると、問題なく動作します。したがって、上記のコード例では、k-load-more="false" を設定すると機能します。エンドレススクロールでも試してみましたが、どちらも同じ効果があります。

4

0 に答える 0