Question

我正在尝试为新网站尝试javscript框架，而且我今天开始使用knockoutjs。现在我被卡住了，因为数据没有呈现。希望任何人都能指出我正确的方向。我正在使用knockoutjs 2.2.1和knockout 2.4.0。

我的viewmodel看起来像这样：

var UserModel = function () {
    var self = this;
    self.user = ko.observable();

    // Load user.
    self.load = function() {
        self.loadUser();     
    };

    self.loadUser = function() {
        // Load the main user object
        $.getJSON('/api/v1/users/17368',
            function(data) {
                var loadedUser = {};
                console.dir(data);
                ko.mapping.fromJS(data, {}, loadedUser);
                self.user(loadedUser);
            }
        );
    };

}

$(document).ready(function () {
    var userModel = new UserModel();
    ko.applyBindings(userModel);
    userModel.load();
})

我可以看到数据已加载到ajax请求中。更新：到目前为止，我尝试了不同的映射但没有成功：

ko.mapping.fromJS(data, {}, loadedUser);

ko.mapping.fromJS(data, loadedUser);

在上面的loadUser中，输出到控制台的数据如下所示：

Array[1]
  0: Object
    id: "17368"
    email: "john@domain.net"
    firstname: "John"
    lastname: "Morris"
    phone1: "000-1234567"

但是，此数据绑定代码段中未呈现任何内容。它会因缺少姓氏或名字而窒息：

<table>
     <thead>
        <tr>
            <th>lastname</th>
            <th>firstname</th>
        </tr>
    </thead>    
    <tbody data-bind="foreach: user">
        <tr>
            <td><span data-bind="text: lastname"></span></td>
            <td><span data-bind="text: firstname"></span></td>
        </tr>                
    </tbody>
 </table>

Answer 1

您不应对用户使用foreach绑定，因为用户不是observable array。请改用with绑定：

<tbody data-bind="with: user">
    <tr>
        <td><span data-bind="text: lastname"></span></td>
        <td><span data-bind="text: firstname"></span></td>
    </tr>                
</tbody>

KnockoutJS无法渲染

1 个答案: