一例knockout with绑定，异步调用数据为null导致的绑定div标签内容不能显示的解决

昨天在做页面发表评论和评论分页显示问题的时候遇到一问题。我的这个页面是交规题目练习页面，这个页面会有多道题。当点击每道题的评论后，下面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>

更改后，进行测试，这次没问题了。可以正常显示，问题解决