Question

我是knockout.js的新手，并在他们的网页上完成了这些示例。我的工作的一个相关示例是Ajax todo list，其中列表的条目在浏览器和服务器之间来回发送。

我正在尝试建立一个带有评论列表的网站。

<ul data-bind="foreach: comments, visible: comments().length > 0">
    <li>
        <input data-bind="value: title, disable: isDone" />
        <a href="#" data-bind="click: $parent.removeComment">Delete</a>
    </li>
</ul>

我可以使用observableArray对象，并在加载网站时使用knockout创建整个ul-list。但是我也希望网站在没有javascript和ajax的情况下工作（这样搜索引擎可以将其编入索引，而没有javascript的用户可以使用它）。因此，如果站点可以从服务器加载一些已经存在的注释为html，那将更好。但我希望knockout.js以与新添加的注释相同的方式处理现有注释，即我希望所有li元素都是comments-observableArray的一部分，甚至是从服务器加载为html的那些元素。这可能吗？怎么样？

Answer 1

不，你不能'混合'淘汰数据源和HTML。但是你可以显示你的html，然后使用knockout来显示动态评论。

您可以在Ajax回调函数中将新项添加到注释observableArray。

初始化绑定

var vm = {
    comments : ko.observableArray([...])
};
ko.applyBindings(vm);

服务器回调函数

var ajaxCallback = function(items){
    ko.utils.arrayForEach(items,  function(item){
        vm.comments.push(item);
    });    
}

可能是您可以在服务器上生成一个初始化客户端注释数组的脚本。

我希望它有所帮助。

Answer 2

为了解决这个问题，我使用JSON预先填充了我的observable并将相同的JSON传递给服务器端进行渲染。生成的HTML如下所示：

<input data-bind="value: title" value="{{title}}" />

我使用NodeJS / Handlebars，但这可以通过任意数量的服务器端/模板组合来完成。例如。 PHP / Smarty。

预先填充的observableArray在淘汰赛中

2 个答案: