1

我想要完成的是根据属性（即类别）在 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 -->

计划是每个“阶段”都有一个栏目，即“规划”、“设计”、“开发”，每个都会显示该特定阶段的项目，但我不知道如何设置它。有没有一种方法可以根据它们的“阶段”属性拆分该数组并在单独的列中显示项目，或者是否有另一种我应该研究的做事方式？我应该有一个单独的数组来单独处理每个类别吗？

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

任何帮助/见解表示赞赏。

4

1 回答 1

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>

这是一个带有演示的小提琴。

于 2013-08-14T19:08:07.687 回答