KnockoutJSとJavaScriptが得意な場合は、無視しないでください！ 、あなたの知識が必要です。
初心者、お見逃しなく。 この投稿へのコメントは、 KnockoutJSを正しく記述する方法に関するヒントを提供します。
Cookie内のフィルターの状態を維持しながらリストをフィルター処理します。
探している： KnockoutJSのベストプラクティスにより、不良コードが生成されないようにします。
注意：デザインが苦しむため、記事を書くことはめったにありません。 心配しないでください。 PMへの登録に関するエラーと推奨事項を送信します。 ありがとう
スクリーンショット
ソースコード
フィルター
<div class="filter-list"> <div class="filter"> <label for="filter_ended"><input type="checkbox" data-bind="checked: filterEnded" id="filter_ended" /> </label> </div> <div class="filter"> <label for="filter_simple"><input type="checkbox" data-bind="checked: isSimpleView" id="filter_simple"/> </label> </div> <div class="filter"> <label for="filter_sort_date"><input type="radio" data-bind="checked: sorting" value="date" id="filter_sort_date" /> </label> </div> <div class="filter"> <label for="filter_sort_abc"><input type="radio" data-bind="checked: sorting" value="asc" id="filter_sort_abc" /> </label> </div> </div>
data-bind="..."
-KnockoutのHTMLへのバインド。
<input type="checkbox" data-bind="checked: filterEnded" id="filter_ended" />
filterEnded == true
場合、
checked
属性を設定し
checked
<input type="radio" data-bind="checked: sorting" value="date" id="filter_sort_date" />
- sorting
が値属性の
value
と等しい場合、
checked
属性を設定し
checked
表示する
<div class="items" data-bind="foreach: filteredItems, css: {items_simple: isSimpleView}"> <div class="item" data-bind="text: name, css: {item_is_ended: is_ended}"></div> </div>
filteredItems
れたアイテムを格納する配列。 すべての要素は
viewModel.items
保存され
viewModel.items
。
foreach: filteredItems
配列のすべての要素を通過させ、テンプレートを
.items
内の要素に適用し
.items
。
css: {items_simple: isSimpleView}
isSimpleView == true
場合、
.items
.items_simple
クラスを追加し
isSimpleView == true
。
text: name
-
$data.name
の配列要素の
name
パラメーター（
$data.name
代替）のテキスト値を示します。
データ
$items_json = json_encode( array( array( 'name' => '-', 'is_ended' => false, 'order_date' => 1 ), array( 'name' => '', 'is_ended' => false, 'order_date' => 2 ), array( 'name' => ' ', 'is_ended' => true, 'order_date' => 3 ), array( 'name' => 'GTO', 'is_ended' => true, 'order_date' => 4 ), ))
プラグ可能なJS（ body
閉じる前）
<script type="text/javascript" src="/assets/js/cookie.js"></script> <script type="text/javascript" src="/assets/js/libs/knockout-2.1.0.js"></script> <script type="text/javascript"> var data_items = <?= $items_json ?>; </script> <script type="text/javascript" src="/assets/js/filters.ko.js"></script>
ViewModel（ filters.ko.js
）
(function () { // false var getParamBool = function (paramName) { return !!((getCookie(paramName) === 'true')); }; // defaultValue, var getParam = function (paramName, defaultValue) { return getCookie(paramName) ? getCookie(paramName) : defaultValue; }; var viewModel = { items: ko.observableArray(data_items), // , filterEnded: ko.observable(getParamBool('filterEnded')), isSimpleView: ko.observable(getParamBool('isSimpleView')), sorting: ko.observable(getParam('sorting', 'date')), sortTypes: { // 'asc': function (left, right) { return left.name === right.name ? 0 : (left.name < right.name ? -1 : 1) }, 'date': function (left, right) { return left.order_date === right.order_date ? 0 : (left.order_date < right.order_date ? -1 : 1) } }, sortProcesssing: function (sortType) { // sortType = sortType || this.sorting(); if (this.sortTypes[sortType]) { setCookie('sorting', sortType, 30); this.items.sort(this.sortTypes[sortType]); // sort() } } }; // items viewModel.filteredItems = ko.computed(function () { var onlyEnded = this.filterEnded(); if (onlyEnded) return ko.utils.arrayFilter(this.items(), function (item) { // return item.is_ended == onlyEnded; }); else return this.items(); }, viewModel); // , viewModel.sorting.subscribe(function (sortType) { viewModel.sortProcesssing(sortType); }); viewModel.filterEnded.subscribe(function (newValue) { setCookie('filterEnded', newValue, 30); }); viewModel.isSimpleView.subscribe(function (newValue) { setCookie('isSimpleView', newValue, 30); }); // View viewModel.sortProcesssing(); ko.applyBindings(viewModel); // })();
関連資料
-
Observable
変更追跡 - フォームの操作：
checked
checkbox
とradio
バインドされたバインディング -
arrayFilter
ユーティリティ 、使用方法および使用場所 -
observableArray
操作
マスター、どのようにコードをさらに改善しますか？
UPD：コードが更新されました。
xdenserのアドバイスについて
-
filters.ko.js
コードは、self-invoking
関数にラップされています。 これにより、名前空間がクリーンになります。 -
sortTypes
は、1つのsortTypes
オブジェクトの下にグループ化されますsortTypes
mac2000とxdenserのアドバイスでは、パラメーターには、その本質をよりよく反映するより論理的な名前が付けられています。
UPD2：
porcelanosaとserjogaのアドバイスで、コードの説明が追加されました。