2

我正在尝试将返回的结果正确地放入带标签的部分 - 我的意思的例子。

控制器：

public IEnumerable<Users> GetUserList(int? id, int? pageNumber)
        {
            if (!id.HasValue)
                throw new HttpResponseException(HttpStatusCode.NotFound);

            int _pageNum = pageNumber.HasValue ? pageNumber.Value : 1;
            return new UserService().GetUsers(id.Value, pageNumber: _pageNum);
        }

看法：

<div id="listView"  data-bind="template: { name: 'list', foreach: Users }">
            <section id="Images">
                <section id="users"></section>
            </section>
        </div>

淘汰赛.js/jquery：更新

  var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// The ViewModel for the page
var viewModel = {
    Users: ko.observableArray([]),
    users: ko.observableArray([]),
    groups: ko.computed({
        read: function(){
            var groups = [];
            var groupLetter;
            for(var i = 0; i <letters.length; i++){
                viewModel.Users.groups[letters[i]].users([]);
            }
            ko.utils.arrayForEach(viewModel.users(), function (user) {
                groupLetter = user.name()[0].toUpperCase();
                if (groups.indexOf(groupLetter) < 0) {
                    groups.push(groupLetter);
                }
                groups[groupLetter].users.push(user);
            });
            return groups.sort();
        },
        deferEvaluation: true
    }),

};
for (var i = 0; i < letters.length; i++) {
    viewModel.users.groups[letters[i]] = { users: ko.observableArray([]) };
}

// 页面的 ViewModel

var viewModel = {
    Users: ko.observableArray([]), //already a sorted list of users
    TotalRoster: null,
    CurrentPage: ko.observable(1),
    DataIsLoading: ko.observable(false),

};

所以这会在视图中返回：Amanda
Bob
Frank Kate Tim

我想让这个显示在视图中：

A（标题）

阿曼达

B（标题）

鲍勃

F（标题）

坦率

K（标题）

凯特

T（标题）

蒂姆

主要是供查看者查看的视觉参考 - 它将为存在的用户显示字母标题，因此如果没有名称以 S 开头的用户，则不会有 S 标题。任何关于我可以研究的地方或可以称之为什么的帮助我都可以阅读到这将是很棒的。

4

2 回答 2

0

您可以在客户端按用户名对用户进行分组，如下所示：

// assuming the array is sorted
var users = ['Amanda', 'Anna', 'Bob', 'Frank', 'Francois', 'Sam'];

var lastGroup = null;
var vm = {
    groups: []
};

ko.utils.arrayForEach(users, function (user) {
    // known group
    if (lastGroup && lastGroup.name == user[0]) {
        lastGroup.users.push(user);
    } else {            
        // unknown group
        lastGroup = {
            name :user[0], users : [user]
        };
        vm.groups.push(lastGroup);
    }
});



<div data-bind="foreach:groups">
    <span data-bind="text:name" style="font-weight: bold"></span>    
    <br/>
    <div data-bind="foreach:users">
        <span data-bind="text:$data"></span>
        <br/>
    </div>
</div>

见小提琴

于 2013-09-09T20:00:25.597 回答
0

我可以告诉您，仅通过循环绑定中的 Users 数组是无法做到这一点的。每次迭代都会生成为每个用户对象提供的模板化 html 代码。

我会考虑的一种方法是创建一个基于用户名的第一个字母的组的动态数组，并将它们附加到根 observableArray 对象。

function ViewModel() {
    var self = this;
    var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    self.users = ko.observableArray([]);
    self.users.groups = ko.computed({
        read: function(){
            var groups = [];
            var groupLetter;
            for (var i = 0; i < letters.length; i++) {
                self.users.groups[letters[i]].users([]);
            }
            ko.utils.arrayForEach(self.users(), function (user) {
                groupLetter = user.name()[0].toUpperCase();
                if (groups.indexOf(groupLetter) < 0) {
                    groups.push(groupLetter);// not listed?  Add it
                }
                self.users.groups[groupLetter].users.push(user);// Add to the grouped users array
            });
            return groups.sort();
        },
        deferEvaluation: true
    });

    for (var i = 0; i < letters.length; i++) {
        self.users.groups[letters[i]] = { users: ko.observableArray([]) };
    }
}

现在在您的视图中：

<div data-bind="foreach: { data: $root.users.groups, as: '$group' }">
    <h3 data-bind="text: $group"></h3>
    <ul data-bind="foreach: { data: $root.users.groups[$group].users, as: '$user' }">
        <li data-bind="text: $user.name"></li>
    </ul>
</div>

jsFiddle

*注意：如果您需要在客户端动态更新这些名称，您只会想走这条路线。如果此列表保持不变，那么最好采用 Damien 的回答。

于 2013-09-09T20:54:26.263 回答