有条件地渲染容器

Render container conditionally

本文关键字：有条件      更新时间：2023-09-26

是否可以根据knockout.js的条件为模板渲染容器?

这行不通，但显示了我想要做的:

<div data-bind="foreach: items">
 <!-- ko if: $data.startContainer -->
 <div class="container">
 <!-- ko -->
 <div data-bind="html: $data.contentElement"></div>
 <!-- ko if: $data.endContainer -->
 </div>
 <!-- ko -->
</div>

在knockout.js github网站上发现一个线程，表明这是不可能与本地模板模型:https://github.com/SteveSanderson/knockout/issues/307

显然，结束注释被理解为未结束的div标记的内部。

我的希望是在动态模板上，但也失败了，如小提琴所示。

http://jsfiddle.net/XbdGs/3/

<script type="text/html" id="withContainer">
     <div class="container">
         <!-- ko template: 'withoutContainer' -->
         <!-- /ko -->
     </div>
</script>

由此我得出结论，你可以尝试3 foreach解决方案，使用Posthuma建议或退到另一个模板引擎，如jquery。如knockout文档中所提到的。

http://knockoutjs.com/documentation/template-binding.html

您可以通过自定义绑定来实现。

更新:

如果您想打开一个div并从另一个项关闭，则自定义绑定看起来像这样:

ko.bindingHandlers.myCustomBinding = {
update: function(element, valueAccessor, allBindings, data, context){
    var value = valueAccessor();
    var items = ko.utils.unwrapObservable(value);
    var currentElement = element;
    ko.utils.arrayForEach(items, function(item){
        if(item.startContainer){
            var container = document.createElement('div');
            $(container).append(item.displayContent);                
            $(container).addClass("container");
            currentElement = container;                
        }
        else if(item.endContainer){
            $(currentElement).append(item.displayContent);
            $(element).append(currentElement);
            currentElement = element;
        }
        else{                
            $(currentElement).append(item.displayContent);
        }            
    });
  }
};
HTML: 

<div data-bind='myCustomBinding: items'></div>

可能有更好的方法来编写这段代码，并且可能使用knockout内置绑定，但这应该足以让您入门。

http://jsfiddle.net/posthuma/f5wG4/2

相关文章：