Question

我刚刚开始使用Knockout.js，我有一个视图（html），应该通过jquery的$ .getJSON方法来填充来自rest api的数据。当我运行应用程序时，没有任何显示，但使用firebug我可以看到＆＃39; GET＆＃39;查询返回状态代码200和正确的数据。因为Knockout.js中的绑定应该是自动的，所以我可以解决为什么在视图中没有显示任何内容的问题。以下是我的代码。感谢

<div id ='main'>
<!-- ko foreach: posts -->


    <p>Hello</p><span data-bind="text: title"></span></p><p data-bind="text: content"></p>
    <p data-bind="text: author"></p><p data-bind="text: date"></p>

<!-- /ko -->
</div>
</body>
        <script type="text/javascript">

        function Post(data){
            this.title = ko.observable(data.title);
            this.content = ko.observable(data.content);
            this.author = ko.observable(data.author);
            this.date = ko.observable(data.date)
        }
        function PostListViewModel(){
            var self = this;
            self.posts = ko.observableArray([]);


            $.getJSON("/posts", function(getPost){
                var mappedPost = $.map(getPost, function(item){
                    return new Post(item)
                });
                self.posts(mappedPost);

            });
        }

    var postlistviewmodel = new PostListViewModel();
    ko.applyBindings(postlistviewmodel);

</script>

screenshot of my console

Answer 1

这应该是：

$.getJSON("/posts", function(getPost){
    var mappedPosts = $.map(getPost, function(item){
        return new Post(item)
    });

    self.posts(mappedPosts);
});

根本不会self.posts.push(mappedPosts[i])。您应该通过ko绑定传递mappedPosts以更新侦听器。

如果您刚收到最新帖子并希望更新当前列表，请执行以下操作：

var allPosts = self.posts().concat(mappedPosts);
self.posts(allPosts);

如果您只是显示ko.observable，则不需要该模型。如果您也想编辑模型，请保留为。

此外，我倾向于为单视图或多视图模型执行此操作：

ko.applyBindings({viewModel : new viewModel() };

这允许具有多个命名视图模型。访问范围使用：$ root.viewModel

这就是我之前所做的：http://jsfiddle.net/jFb3X/

然后根据此fiddle检查您的代码。

脚本标签也需要位于结束体标记

之上

<html>
<head>
</head>
<body>
<!-- all your html content -->

<script type="text/javascript">
   var viewModel = function () {

   }
   ko.applyBindings({viewModel : new viewModel()});
</script>
</body>
</html>

Answer 2

是否像等待DOM准备好一样简单？

您是否可以尝试以下操作：

$(function () {
    ko.applyBindings(postlistviewmodel);
});

消息来源：我已经做过几次这样做了，并且有点想要看看我做错了什么。： - ）

（作为一种风格的东西，我也会将/ body移动到/ script之后 - 可能与你的问题无关）。

Answer 3

我怀疑你从帖子中获得了多个帖子。你只推一个项目（数组）。

...
            $.getJSON("/posts", function(getPost){
                var mappedPosts = $.map(getPost, function(item){
                    return new Post(item)
                });
                for(var i = 0; i < mappedPosts.length; i++) {
                    self.posts.push(mappedPosts[i]);
                }

            });
...

使用Knockout自动双向绑定

3 个答案: