Question

是否可以根据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>

Answer 1

在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 foreachs解决方案，使用Posthuma建议或回退到另一个模板引擎，如jquery.tmpl或Underscore，如淘汰文档中所述。

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

Answer 2

您可以通过自定义绑定来完成此操作。

<强>更新

如果要打开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

有条件地渲染容器

2 个答案: