Question

如何使用KnockoutJS实现这段代码，是否可能？

$(document).on("click", 'input.effect', function () {
        var effect = $(this).val();
        if(effect == "max-height") {
            $(".nav-container nav").removeClass("opacity");
            $(".nav-container nav").addClass("max-height");
        } else if(effect == "opacity") {
            $(".nav-container nav").removeClass("max-height");
            $(".nav-container nav").addClass("opacity");
        }
    });

Answer 1

如果您以Knockout的方式考虑它，这实际上更容易阅读和扩展。

这是一个说明概念的方法：http://jsfiddle.net/3QmDv/

HTML：

<div class="default" data-bind="css: navCssOption">
    Hello.
</div>

Nav style: <select data-bind="options: navCssOptions, optionsText: 'name', optionsValue: 'css', value: navCssOption"></select>

这里有趣的部分是css div绑定引用navCssOption可观察的value。这是与select元素上的var model = { navCssOptions: ko.observableArray(), navCssOption: ko.observable(null) }; ko.applyBindings(model); // Add some options. model.navCssOptions.push({ name: 'Semi-Transparent', css: "opacity" }); model.navCssOptions.push({ name: 'Restricted Height', css: "max-height" });绑定的相同可观察对象。

JavaScript的：

select

name元素上的绑定使用css选项文本，选择选项时model.navCssOption写入css。这使其适用于每the documentation for the css: binding div .default { width: 100px; height: 100px; background: red; color: white; padding: 10px; } .opacity { opacity: 0.5; } .max-height { max-height: 50px; }上的{{1}}绑定。

最后，CSS：

{{1}}

您可以看到添加/删除选项不涉及编辑if / then或jQuery单击处理程序，现在它只是将新的（并且可读的）值强加到observableArray中。

希望你能利用这一点，并适应你的情景。

Answer 2

http://knockoutjs.com用于在JavaScript中实现MVVM设计模式。您可以通过与View Model的数据绑定来完成此操作。

如何在Knockout中添加和删除类

2 个答案: