Question

我想要完成的是在observableArray显示中的项目基于属性（即类别），例如：

基本项目设置：

var Project = function(id, name, stage){
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.stage = ko.observable(stage);
}

self.projects = ko.observableArray([
    new Project(1, "Sample Project 1", "Planning"),
    new Project(2, "Sample Project 2", "Design"),
    new Project(3, "Sample Project 3", "Development"),
]);

基本观点：

<div class="large-2 columns planning">
    <h2>Planning</h2>
    <div class="project-holder" data-bind="sortable: { template: 'projectTemplate', data: projects, afterMove: dropCallback }">
        <!-- Projects go here -->
    </div> <!-- /project-holder -->
</div> <!-- /columns -->

计划是为每个“阶段”设置一个列，即“规划”，“设计”，“开发”，每个阶段都会显示该特定阶段的项目，但是我不知道如何设置它。是否有一种方法可以拆分该数组并根据其“阶段”属性在不同的列中显示这些项目，还是有另一种方法可以解决这个问题？我应该有一个单独处理每个类别的数组吗？

我一直在使用单个数组来处理la http://jsfiddle.net/rniemeyer/Jr2rE/，但似乎有更好的方法来处理更大规模的事情。

感谢任何帮助/见解。

Answer 1

如果每个项目一次只能处于一个阶段，那么最直接的方法是使用单独的视图模型将项目分组。例如：

var project = function(name) { 
    this.name = ko.observable(name); 
};

var stage = function(name) { 
    this.name = ko.observable(name); 
    this.projects = ko.observableArray([]);
};

var viewModel = function() {
    this.stages = ko.observableArray([]);
};

如果您希望在视图中每个阶段都有列，现在很容易做到：

<ul data-bind="foreach: stages">
    <li class="column">
        <h5 data-bind="text: name"></h5>
        <ul data-bind="sortable: { data: projects }">
            <li class="project">
                <span data-bind="text: name"></span>
            </li>
        </ul>
    </li>
</ul>

这是fiddle with a demo。

根据属性显示observableArray项

1 个答案: