Question

我还在学习Knockout JS，我想知道如何创建一个＆＃34; general＆＃34;查看可以应用于同一页面上的多个元素的模型/函数。

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

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

<button type="button" class="btn btn-primary" data-bind="click: slideInOutClick()"> Show more details </button>

<div class="slide-in-out-container w300" data-bind="css: { 'show200': slideOut() === false }">
    <div class="panel panel-primary">
        <div class="panel-body">
            <p>Some text here</p>
            <p>And some more text here</p>
        </div>

    </div>
</div>

JS：

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

function globalModel(){
    var self = this;

    self.slideOut = ko.observable();

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

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

Answer 1

您希望通过创建custom binding handler来扩展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
    }
};

对于您的具体示例，您可以对此进行修改，或者，根据您执行的操作＆＃34; CSS Transition＆＃34;，您可以通过使用css binding来获取切换类，让CSS3处理转换。

这使您可以保持视图模型（接近业务逻辑）与视图关注点（如转换）分开。

如何创建在同一页面上多次使用的Knockout功能？

1 个答案: