속성

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입니다.