使用带有 Sammy 路由的 KnockoutJS observableArray答案

【问题标题】：Use a KnockoutJS observableArray with a Sammy route使用带有 Sammy 路由的 KnockoutJS observableArray
【发布时间】：2012-08-09 12:46:45
【问题描述】：

我正在使用搜索屏幕，用户可以在其中选择多个选项并获取结果。当用户选中一个复选框时，会发出一个 AJAX 请求并将结果显示在屏幕上。 So the search doesn't have a "Search" button, the query starts when an option is picked.

我将 KnockoutJS 用于 UI，Sammy 用于路由。搜索选项绑定到 observableArray。问题是我不知道在哪里可以设置 location.hash。我现在使用的是订阅功能。在 KnockoutJS 教程中，我看到点击绑定到设置哈希的函数，但在这里我认为不需要为每个复选框创建点击函数，我也认为太多了。

这里是Fiddle

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());

【问题讨论】：

您的 jsFiddle 链接转到空白页面。你能修好吗？

标签： knockout.js sammy.js

【解决方案1】：

修复简单有效。我没有使用“订阅”方法，而是添加了一个 ko.computed 调用，我在其中设置了哈希。

这个调用用“throttle”扩展器装饰，所以当更多相关的可观察对象几乎同时发生变化时，哈希将只设置一次，所以 Sammy 只会拦截一次路由，大在涉及 AJAX 请求时保存。

这里是Fiddle

【讨论】：