仅在ajax请求期间渲染挖空模板

Question

我正在尝试使用knockout来快速模板呈现从jQuery请求接收的JSON数据。

基本上，我会加载已预先呈现的HTML内容的页面（因此我可以显示内容，如果用户的浏览器禁用了javascript，我不会假装所有功能都可以工作但至少显示基本内容）。

下次用户点击链接，而不是重新加载页面时，我使用Ajax提交get-request并返回一些json。这是我应该在旧内容的位置呈现的数据。

问题非常简单：我将淘汰模板与我的HTML标记集成在一起，但在调用ko.applyBindings(myviewmodel)后页面加载时，我会删除所有预渲染内容。这是因为我的模型没有任何要渲染的项目。

有没有办法为HTML请求使用预渲染数据，只针对Ajax请求进行淘汰模板？

Answer 1

Here is a fiddle演示了visible绑定如何显示/隐藏模板。请注意，如果从左侧列表中取消选择Knockout，欢迎部分仍会正确显示。单击按钮以模仿ajax请求，并看到模板部分显示。

可见绑定是一种标准的Knockout绑定，用于控制控件是否显示。它看起来像这样：

<div data-bind="visible: welcome">

welcome是您的viewmodel上的可观察属性。

如果仍然不清楚，我强烈推荐Knockout Interactive Tutorials，它们将涵盖此基本用法和其他基本用法。

Answer 2

您可以不执行以下操作，而不是尝试执行以下两项操作：

1. 使用可保存内容数据的observable属性定义viewmodel。
2. 在初始页面加载时，使用预渲染数据初始化observable属性（可能从隐藏字段中检索？）。
3. 使用您的模板将您的内容元素绑定到observable。

然后，当您发出ajax请求时，只需使用从请求中检索到的数据更新observable属性中的数据，UI就会自动更新。

修改

这是一个快速jsFiddle演示这个概念（评论javascript以模拟禁用的javascript）。

<input id="initialstate" type="hidden" value="4,5,6" />

<ul id="content" data-bind="template: { name: 'item-template', foreach:data }">
    <li>1</li>
    <li>2</li>
    <li>3</li>    
</ul>

<script type="text/html" id="item-template">
    <li data-bind="text: $data"></li>
</script>​

var viewModel = (function()
{
    var self = {};

    self.data = {};

    function init() {
        $('#content').empty(); 
        self.data = ko.observableArray($('#initialstate').val().split(','));
    }

    init();

    return self;
}());

ko.applyBindings(viewModel);