0

私は新しい Web サイト用の JavaScript フレームワークを試している最中で、まさに今日、knockoutjs を使い始めました。現在、データがレンダリングされていないため、立ち往生しています。誰かが私を正しい方向に向けてくれることを願っています。私はノックアウトjs 2.2.1とノックアウトマッピング2.4.0を使用しています。

私のビューモデルは次のようになります。

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>
4

1 に答える 1

2

foreachユーザーは ではないため、ユーザーにバインディングを使用しないでくださいobservable arraywith代わりにバインディングを使用します。

<tbody data-bind="with: user">
    <tr>
        <td><span data-bind="text: lastname"></span></td>
        <td><span data-bind="text: firstname"></span></td>
    </tr>                
</tbody>
于 2013-02-05T13:17:13.573 に答える