5

是否可以根据条件为模板渲染容器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>
4

2 回答 2

4

在 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

于 2013-05-07T19:50:53.640 回答
1

您可以通过自定义绑定来做到这一点。

更新：

如果您想打开一个 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>

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

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

于 2013-05-07T20:31:35.760 回答