1

我正在尝试使用敲除对从 jQuery 请求中接收到的 JSON 数据进行快速模板渲染。

基本上，我会用已经预渲染的 HTML 内容加载页面（这样我就可以显示内容，如果用户的浏览器禁用了 javascript，我不会假装所有功能都在工作，但至少显示基本内容）。

下次用户单击该链接时，我不会重新加载页面，而是使用 Ajax 提交一个 get-request 并获取一些 json。那是我应该代替旧内容呈现的数据。

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

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

4

2 回答 2

3

这是一个演示visible绑定如何显示/隐藏模板的小提琴。请注意，如果您从左侧列表中取消选择 Knockout，“欢迎”部分仍会正确显示。单击该按钮以模仿 ajax 请求，并查看模板部分显示。

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

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

welcome您的视图模型上的可观察属性在哪里。

If this still isn't clear, I strongly recommend the Knockout Interactive Tutorials, they will cover this and other basic usage.

于 2012-11-13T17:30:53.753 回答
0

与其尝试做两件不同的事情，不如不做以下事情：

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

然后，当您发出 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);
于 2012-11-13T17:24:50.000 回答