Question

我有这个Viewmodel从WCF服务加载用户及其Socialgraph的列表。用户显示正确但不显示社交图表条目。我检查了服务，json返回，一切似乎都没问题。

我应该将模型更改为不同的模式，还是我在ViewModel中加载内容的方式？谢谢

$(document).ready(function () {

var viewModel = {

    users: ko.observableArray([]),              

    loadUsers: function () {
        OData.read("Service_UserProfile/", function (data) {

            viewModel.users.removeAll();
            $.each(data.results, function (index, item) {                    
                var socialgraphs = viewModel.loadSocialGraph();
                var user = new UserProfileModel(item, socialgraphs);                   
                viewModel.users.push(user);                   
            });
        });
    },

    loadSocialGraph: function () {

        var result = new Array();
        // user id will be loaded dynamically in later steps
        OData.read("/Service_UserProfile(1)/Socialgraph/", function (data) {

            $.each(data.results, function (index, item) {                   
                result.push(new SocialGraph(item));                    
           });
        });        
        return result;
    }
};

ko.applyBindings(viewModel);   
viewModel.loadUsers();

}）;

模特

function UserProfileModel(item,socialgraphs) {
    this.Id = ko.observable(item.Id),
    this.Nickname = ko.observable(item.Nickname),
    this.socialgraphs = ko.observableArray(socialgraphs)
};

function SocialGraph(item) {
    this.Id = ko.observable(item.Id),
    this.StartTime = ko.observable(item.StartTime),
    this.Latitude = ko.observable(item.Latitude),
    this.Longitude = ko.observable(item.Longitude)
};

视图

<table>
    <thead>
        <tr>
            <th>User ID</th>
            <th>Nickname
            </th>
            <th>Social Graph
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: users">
        <tr>
            <td data-bind="text: Id"></td>
            <td data-bind="text: Nickname"></td>
            <td>
                <ul data-bind="foreach: socialgraphs">
                    <li data-bind="text: Id"></li>
                    <li data-bind="dateString: StartTime"></li>
                    <li data-bind="text: Latitude"></li>
                    <li data-bind="text: Longitude"></li>
                </ul>
            </td>
        </tr>

    </tbody>

</table>

Answer 1

你应该改变：

loadSocialGraph: function () {

    var result = ko.observableArray();
    // user id will be loaded dynamically in later steps
    OData.read("/Service_UserProfile(1)/Socialgraph/", function (data) {

        $.each(data.results, function (index, item) {                   
            result.push(new SocialGraph(item));                    
       });
    });        
    return result;
}

和

function UserProfileModel(item,socialgraphs) {
    this.Id = ko.observable(item.Id),
    this.Nickname = ko.observable(item.Nickname),
    this.socialgraphs = socialgraphs
};

为什么：
在this.socialgraphs = ko.observableArray(socialgraphs)行右边的社交图是[]。只有经过一段时间间隔才有将充满价值。而且由于它不是可观察的阵列，淘汰赛不会注意到有些物品被推入其中。即它将保持空白。

Knockout.js使用foreach来显示对象属性

1 个答案: