私は、ユーザーがいくつかのオプションを選択して結果を取得できる検索画面で作業しています。ユーザーがチェックボックスをオンにすると、AJAXリクエストが行われ、結果が画面に表示されます。したがって、検索には「検索」ボタンがなく、オプションが選択されるとクエリが開始されます。
UIにはKnockoutJSを使用し、ルートにはSammyを使用しています。検索オプションはobservableArrayにバインドされています。問題は、location.hashをどこに設定できるかわからないことです。私が今使っているのはサブスクライブ機能です。KnockoutJSチュートリアルで、クリックがハッシュを設定する関数にバインドされていることを確認しましたが、ここでは、チェックボックスごとにクリック関数を作成する必要はないと思います。また、多すぎると思います。
ここでフィドル
HTML:
<input type="checkbox" value="1" data-bind="checked:sizeOptions" /> Size 1
<br />
<input type="checkbox" value="2" data-bind="checked:sizeOptions" /> Size 2
<br />
<br />
<div data-bind="text: ko.toJSON($root.sizeOptions)"></div>
Calls: <div data-bind="text: $root.calls"></div>
モデル:
function SearchModel() {
var self = this;
self.calls= ko.observable(0);
self.sizeOptions = ko.observableArray([]);
// Should this be a Behaviour? (like click: goToFolder). This would be called on the Sammy rout also
self.sizeOptions.subscribe(function () {
var _calls = self.calls();
_calls = _calls + 1;
self.calls(_calls);
location.hash = "o=" + self.sizeOptions().join();
console.log("subscribe");
});
Sammy(function() {
this.get('#o=:o', function() {
self.sizeOptions(this.params.o.split(','));
console.log("Sammy get");
// do an AJAX request and place the results in an observableArray
});
}).run();
}
ko.applyBindings(new SearchModel());