重置同位素和淘汰赛布局答案

【问题标题】：Resetting Isotope and Knockout layout重置同位素和淘汰赛布局
【发布时间】：2012-10-22 16:05:53
【问题描述】：

我在重置/刷新/重新加载基于 Knockout 模型的同位素视图时遇到困难。我已经扩展了一个早期的小提琴来删除和替换项目，但它不可靠并且破坏了排序。

    self.reset = function () {
        // Remove all services
        $.each(self.services(), function (index, value) {
            var serviceToDelete = self.services()[0]
            self.removeService(serviceToDelete);
        })

        // Add some back
        self.services.push(new Service('some service', 'and this is a description', 7, '01/01/2000'));
        self.services.push(new Service('another service', 'just another description', 2, '02/01/2000'));
        self.services.push(new Service('driving school', 'learn to drive', 4, '10/01/2000'));
        self.services.push(new Service('ice cream sunday', 'sweet cold and delicious', 3, '01/01/2002'));
        self.services.push(new Service('tootie fruity', 'a rootie', 6, '01/01/2003'));
        self.services.push(new Service('hand gliding', 'you can see your house from here', 5, '01/01/2012'));
        self.services.push(new Service('turkey dinner', 'is not just for thanksgiving', 1, '01/01/2011'));                
    }

我用“重置”按钮扩展了以下 jsfiddle，它只是从 observableArray 中删除所有项目并一一读取它们。

http://jsfiddle.net/8uxKF/2/

在 IE10 中完全失败。 fiddles Run 窗格甚至无法加载。
它在 Chrome 中部分工作，但在重置后，每当启动排序时都会输出控制台错误：

Uncaught TypeError: Object # has no method 'sortBy'
在 FF 中，它会出现与 chrome 类似的错误。（但在我的应用程序中无法排序）

有人可以帮忙吗？重置后我需要排序才能工作。我不确定这是否是重置的“最佳”方式，因为它似乎会导致问题。

【问题讨论】：

标签： jquery knockout.js jquery-isotope

【解决方案1】：

self 没有名为sortBy() 的函数/属性（也没有sortDir()）。您的serviceAdded“事件”尝试调用那些不存在的属性，因此失败。

我不清楚你到底应该做什么，你的代码到处都是。也许您应该将这些可观察对象添加到您的视图模型中？

function ViewModel() {
    var self = this;
    // ...
    self.sortBy = ko.observable('name');
    self.sortDir = ko.observable('ascending');
}

【讨论】：

【解决方案2】：

我已经查看了代码并且它没有问题，除了我已经更正的 sortByID 上的一个错误。

令人沮丧和尴尬的是，当从 GitHub 提供服务时，由于 mimetype 不匹配，jsFiddle 似乎阻塞了其中一个资源。需要明确的是，这是在 jsFiddle 中从 GitHub 运行外部脚本的问题。

最终代码发布到 jsfiddle.net/8uxKF/3 以供参考。

【讨论】：