MVC 模型 + knockoutJS - 应用绑定时呈现的故障答案

【问题标题】：MVC model + knockoutJS - glitchiness with rendering as bindings are appliedMVC 模型 + knockoutJS - 应用绑定时呈现的故障
【发布时间】：2014-01-02 17:31:17
【问题描述】：

我的 MVC 页面采用以下方法，负责应用来自 MVC @Model 的绑定。这是我的_Layout，它目前使用ViewBag 收集数据用于淘汰LayoutVm：

<head>
@Styles.Render("~/bundles/css")
@Scripts.Render("~/bundles/js")
</head>

// body contents, then at the bottom:

@RenderSection("scripts", required: false)
@{
    var serialized = (string)JsonConvert.SerializeObject(ViewBag);
}
<script type="text/javascript">
    $(document).ready(ko.applyBindings(new LayoutVm(
                @Html.Raw(serialized.SanitizeData())), document.getElementById("nav-header")));
</script>

这是可行的，但它似乎不完美 - 我可以看到所有被淘汰的元素在应用任何逻辑之前呈现，所以最初页面看起来有点混乱，因为应该隐藏的元素被显示出来，好像viewmodel 不会在一瞬间绑定。例如：

            <!-- ko if: isLoadingDropdown() -->
            <p class="dropdown-header">Loading...</p>
            <!-- /ko -->

isLoadingDropdown 初始化为 false，但内部内容会在页面呈现时显示很短的时间。解决这个问题的最佳方法是什么？

【问题讨论】：

您的document.ready 错误。
@haim770 哦？怎么样？
$(document).ready(function() { ko.applyBindings(new LayoutVm( @Html.Raw(serialized.SanitizeData())), document.getElementById("nav-header")) });
@haim770 - 我很困惑 - 如何更好地将其包装在函数中？
我不认为它会解决问题。但document.ready 期待function。

标签： asp.net-mvc asp.net-mvc-4 knockout.js

【解决方案1】：

您可以在应用绑定之前隐藏它

http://jsfiddle.net/ehv83/

<body data-bind="visible: true" style="display: none">
    KO Content
</body>

没有内联css

http://jsfiddle.net/ehv83/1/

【讨论】：