Jquery 如何创建在同一页面上多次使用的淘汰函数？

我还在学习

Knockout JS

，我想知道如何创建一个“通用”视图模型/函数，可以应用于同一页面上的多个元素

一个具体的例子是，我试图创建一个全局函数，通过添加一个CSS类来向下/向上滑动HTML元素。幻灯片效果是使用CSS transistion创建的

到目前为止，它正在工作：（）：

---

当我在同一页上需要多个滑动面板时，问题就出现了。所以我的问题是，如何使用Knockout来实现这一点？

您希望通过创建一个。您提到的确切示例在那篇文章中，尽管使用了jQuery：

ko.bindingHandlers.slideVisible = {
    update: function(element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);

        // Grab some more data from another binding property
        var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified

        // Now manipulate the DOM element
        if (valueUnwrapped == true)
            $(element).slideDown(duration); // Make the element visible
        else
            $(element).slideUp(duration);   // Make the element invisible
    }
};

对于您的特定示例，您可以修改它，或者，根据您如何进行“CSS转换”，您可以通过使用来切换类，并让CSS3处理转换

---

这允许您将视图模型（接近业务逻辑）与视图关注点（如转换）分开。

我将创建一个包含通用内容的SlideableViewModel。因此，每当您需要一个可滑动的容器时，您都可以这样做；但接下来我必须为我想要滑动的每个面板创建一个新函数（MyModelThatShouldSlideIn1、MyModelThatShouldSlideIn2等）？关键是要避免这种情况。创建jQuery plygin似乎更好。不，你不需要，幻灯片的按钮和相关html都将是SlideableViewModel模板的一部分，切换状态的代码将是模板的一部分SlidableViewModel@Anders我想我的大脑还在度假。想写一个小例子吗？谢谢。看起来是个好主意。您将如何修改此项以实现我的目标？不可能/太宽泛的问题恐怕无法回答：我们没有您所追求的过渡的任何细节。但是我可以想象一个

css

绑定版本可能会出现。对于定制bindingHandler，我建议您阅读文档，尝试一下预期结果，并针对具体问题提出新问题。祝你好运嗯。。。不如果查看JSFIDLE，您将看到所有代码，包括CSS传输。在过去的两个小时里，我一直在阅读文档和示例。但看起来我最终会使用jQuery而不是Knockout。

// Global Knockout model
ko.applyBindings(new globalModel());

function globalModel(){
    var self = this;

    self.slideOut = ko.observable();

    self.slideInOutClick = function(){
        self.slideOut(!self.slideOut());
    }
}

ko.bindingHandlers.slideVisible = {
    update: function(element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);

        // Grab some more data from another binding property
        var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified

        // Now manipulate the DOM element
        if (valueUnwrapped == true)
            $(element).slideDown(duration); // Make the element visible
        else
            $(element).slideUp(duration);   // Make the element invisible
    }
};