昨天在做页面发表评论和评论分页显示问题的时候遇到一问题。我的这个页面是交规题目练习页面，这个页面会有多道题。当点击每道题的评论后，下面id为pinglun部分的内容会显示出来。这部分内容用了with绑定。由上到下依次会显示评论内容，按先后次序显示。然后是分页，这个分页只有在超过两页后才会显示上一页，下一页。最下面是一个评论内容输入框及一个提交评论按钮。代码如下：
<div class="col-md-12" style="height: 100%; margin-top: 10px;display:none;" id="pinglun" data-bind="with:pinglunVM"> <!--ko foreach:$data--> <div class="col-md-12" style="margin-bottom:10px;border-bottom:1px solid #3c3c3c;padding-bottom:10px;"> <div class="col-md-9" data-bind="text:Content"></div> <div class="col-md-3" data-bind="text:CreateTime"></div> </div> <!--/ko--> <div class="col-md-12" data-bind="visible:page.VM.QuestionLibrary.maxPage()>=2"> <a href="javascript:upPage();" class="btn btn-default" style="padding:2px 13px;margin-bottom:15px;" >上一页</a> <a href="javascript:nextPage();" class="btn btn-default" style="padding:2px 13px;margin-left:15px;margin-bottom:15px;" >下一页</a> </div> <div class="col-md-12"> <textarea id="pinglunContent" cols="60" rows="5"></textarea><br /> <a href="javascript:publishComment();" class="btn btn-default" style="padding:2px 13px;">发表评论</a> </div> </div>
当练习题已经有评论内容时，点击评论，此段代码所表示的内容都能正确显示。然而如果该练习题还没有任何评论，当点击评论的时候，我要的效果是评论内容自然是没有的，然后上页，下页部分不显示，但是评论输入框及发表评论这部分应该显示的。但实际是，点击评论没有任何反应，没有输入框，也没有提交按钮。这部分显示评论的js代码如下：
/** * 评论层开关 */ function ping() { $("#pinglun").toggle(); $.post("/member/GetPinglunList", { iid: page.VM.QuestionLibraryVM.IID(), pageIndex: 1 }, function (data) { if (data != null) { $.each(data, function (index, item) { var thisTime = parseInt(item.CreateTime.replace(/\D/igm, "")); item.CreateTime = new Date(thisTime).Format("yyyy-MM-dd hh:mm"); }); } page.VM.QuestionLibraryVM.pinglunVM = ko.mapping.fromJS(data, {}, page.VM.QuestionLibraryVM.pinglunVM); }); $.post("/member/GetPingLunMaxPage", { iid: page.VM.QuestionLibraryVM.IID(), pageIndex: 3 }, function (data) { var maxPage = data; page.VM.QuestionLibraryVM = ko.mapping.fromJS({ maxPage: maxPage }, {}, page.VM.QuestionLibraryVM); }); } 出现这个问题第一反应推测是with绑定在数据绑定获取的data为null时，with绑定的整个区域不会在页面呈现。因为快下班，所以很急，没仔细分析，先找替代方法，就是拆分，把with绑定这部分只包含评论列表及分页，把评论输入框及提交按钮但对摘到另一个div标签中显示。但是由于这部分显示开关是以id为pinglun来弄的，要改动，需要改动多个地方，感觉太麻烦，不想这样改。然后决定放放。第二天来后想从knockout官方网站找下有没有解决办法。找了下with绑定的说明页面。还真找到了昨天推测的with绑定在数据绑定获取的data为null时，with绑定的整个区域不会在页面呈现的相关解释。解释是这样的：
The with binding will dynamically add or remove descendant elements depending on whether the associated value is null/undefined or not
这句话的中文意思是with绑定会依据关联值是null，未定义或者不确定而动态添加或移除子元素。只是它这种移除很粗放，把with绑定中的非绑定元素也移除了。在阅读这个页面解释的时候看到了with绑定的另一个使用方法，以前从来没用过。
<ul> <li>Header element</li> <!-- ko with: outboundFlight --> ... <!-- /ko --> <!-- ko with: inboundFlight --> ... <!-- /ko --> </ul> 我觉得我这里可以使用。就是把with绑定往下级元素移动下使用。更改后的代码如下：
<div class="col-md-12" style="height: 100%; margin-top: 10px;display:none;" id="pinglun"> <!--ko with:pinglunVM--> <!--ko foreach:$data--> <div class="col-md-12" style="margin-bottom:10px;border-bottom:1px solid #3c3c3c;padding-bottom:10px;"> <div class="col-md-9" data-bind="text:Content"></div> <div class="col-md-3" data-bind="text:CreateTime"></div> </div> <!--/ko--> <!--/ko--> <div class="col-md-12" data-bind="visible:maxPage()>=2"> <a href="javascript:upPage();" class="btn btn-default" style="padding:2px 13px;margin-bottom:15px;" >上一页</a> <a href="javascript:nextPage();" class="btn btn-default" style="padding:2px 13px;margin-left:15px;margin-bottom:15px;" >下一页</a> </div> <div class="col-md-12"> <textarea id="pinglunContent" cols="60" rows="5"></textarea><br /> <a href="javascript:publishComment();" class="btn btn-default" style="padding:2px 13px;">发表评论</a> </div> </div> 更改后，进行测试，这次没问题了。可以正常显示，问题解决
