Question

尝试使用滑动转换切换出现在虚拟元素中的模板。虽然下滑过渡正在起作用，但我需要协助进行滑动操作。所以基本上，当虚拟元素出现时，其中的模板会自动滑入并且当时虚拟元素隐藏子模板应该向上滑动。

猜测解决方案应该真正使虚拟元素本身向上/向下滑动而不是子模板。

<script type="text/html" id="tpl">
<div>Hello world!!</div>
</script>   
<a href="#" data-bind="click: toggle">Toggle</a>

<!-- More detail here to show more complexity of production version -->
<!-- ko if: toggleState -->
<div data-bind="slideInTemplate: { name: 'tpl'}"></div>

<!--edit added to show complexity of production version-->
<div data-bind="slideInTemplate: { name: 'tpl2'}"></div>
       <!-- ko if: someOtherToggleState -->
       <div data-bind="slideInTemplate: { name: 'tpl3'}"></div>
       <!-- /ko -->
<!--end edit-->

<!-- /ko -->

JS：

var viewModel = {
    toggleState: ko.observable(false),
    toggle: function () {
        this.toggleState(!this.toggleState());
    }
};

ko.bindingHandlers.slideInTemplate = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        return ko.bindingHandlers['template']['init'](element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);  
        var value = valueAccessor();
        $(element).toggle(ko.unwrap(value));
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
        $(element).hide();
        ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, context);
        var value = valueAccessor();
        ko.unwrap(value) ? $(element).slideDown() : $(element).slideUp(); 
    } 
};

ko.applyBindings(viewModel);

Answer 1

这是你要追求的吗？看到这个小提琴，http://jsfiddle.net/XPYnv/3/

var viewModel = {};

window.ko.renderTemplateHtml = function (templateId, data) {
    ///<summary>Returns html from a KO template</summary>
    var node = $("<div />")[0];
    window.ko.renderTemplate(templateId, data, {}, node);
    return $(node);
};

ko.bindingHandlers.slideInTemplate = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var local = window.ko.utils.unwrapObservable(valueAccessor());
        var options = {};

        ko.utils.extend(options, ko.bindingHandlers.slideInTemplate.options);
        ko.utils.extend(options, local);
        var templateId = options.kotemplate;
        var templateHtml = ko.renderTemplateHtml(templateId, viewModel);

        $(element).after(templateHtml);
        templateHtml.hide();

        $(element).bind('click', function () {
            templateHtml.slideToggle();
        });
    }

};

ko.applyBindings(viewModel);

和HTML：

<script type="text/html" id="tpl">
    <div>Hello world !!</div>
</script> 

<a href="#" data-bind="slideInTemplate: { kotemplate: 'tpl'}">Toggle</a>

Answer 2

你的绑定处理程序中有一些问题：

ko.bindingHandlers.slideInTemplate = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      return ko.bindingHandlers['template']['init'](element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

此后不会在init功能中执行任何操作。从先前的陈述中取出return。

    var value = valueAccessor();

此处value将是您传递给绑定的对象，例如{name: tpl}。您需要获取相应成员的值，即

    var value = valueAccessor().name;

...

update: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
    $(element).hide();
    ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, context);
    var value = valueAccessor();

这里也是一样。

    ko.unwrap(value) ? $(element).slideDown() : $(element).slideUp(); 
}

};

在Knockoutjs自定义绑定中创建幻灯片切换过渡

2 个答案: