배열을 옵션으로 넉 아웃 (Knockout) 맞춤 바인딩에 전달

Question

나는 이것을 시도한 사람 중 첫 번째 사람이 아니지만 내가하려는 일과 일치하는 예는 찾을 수 없다고 확신한다. 그래서 나는 여기있다.

나는 정의 된 녹아웃 사용자 정의 바인딩이 있습니다.

ko.bindingHandlers.table = { 
    init: function (element, valueAccessor) { 
     value = ko.unwrap(valueAccessor()); 
     //Create a table 
}; 

목표는 테이블을 만들려는 사용자가 자바 스크립트에 대해 알아야 할 것을 최소화하는 것입니다. 내가 그들에게 제공하고 싶은 HTML은 같은 것입니다 :

나는 (어떤 JS를 사용하지 않도록 노력하고, 다시) 배열과 같은 형식으로 열을 지정 할 수 있도록하려는

data-bind="table: foo, columns: ['id', 'first name', 'last name', ect...]"></table> 

. 나는 col1과 같은 무언가를 할 수 있다는 것을 알고있다 : 'id', col2 : 'first name'하지만, 내가 만들 때의 .length()를 쉽게 할 수있는 객체/배열을 갖고 싶다. 내 테이블.

데이터를 사용하여 작업 할 때 Jquery를 사용하지만 가능한 경우 이렇게하는 것이 좋습니다.

마지막으로 아니지만 임대하지 않으면 allBindings 접근자를 통해 객체에 액세스 할 수 있다고 가정합니다. 실수로 알려 주면 알려주세요. 미리 감사드립니다.

Answer 1

기존 테이블 바인딩 핸들러 중 하나를 사용하는 것이 좋습니다. Knockout Contrib's KO Grid, 위의 @MichaelBest의 제안 표 또는 이미 나와있는 다른 것.

질문에 관해서; 배열을 바인딩하는 것은 생각했던 것처럼 간단합니다. 배열에 배열을 입력하거나 배열을 보유하는 속성에 바인딩하면됩니다. 그러나 실제로는 bindingHandler을 사용하여 여러 바인딩의 설정을 읽는 것이 좋습니다. 이를 수행하려면/update 함수의 bindingHandler 인 allBindings 매개 변수의 세 번째 매개 변수를 사용하십시오.

의 간단한 예를 같은 결합 될 수있다 : 그런 다음 사용하는 것이

ko.bindingHandlers['table'] = { 
    init: function(element, valueAccessor, allBindings){ 
     var data = ko.unwrap(valueAccessor()); 
     var columns = allBindings.get('columns'); 
     var table = document.createElement('table'); 
     for(var i = 0; i < data.length; i++){ 
      var currentItem = data[i]; 
      var row = document.createElement('tr'); 
      for(var j = 0; j < columns.length; j++){ 
       var column = document.createElement('td'); 
       column.innerText = currentItem[columns[j]]; 
       row.appendChild(column); 
      } 
      table.appendChild(row); 
     } 
     element.appendChild(table); 
    } 
}; 

그 bindingHandler 같은 : 나는 http://jsfiddle.net/TK9y2/

에 바인딩 위의를 사용하여 작업 예제를

<div data-bind="table:data, columns: ['id','firstName']"></div> 

allBindings 매개 변수는 has 메서드를 제공하므로 i를 확인하는 데 사용해야합니다. 당신이 찾고있는 이름과 구속력이 있습니다. 이것에 관해서는 Knockout documentation on custom bindings에서 읽을 수 있습니다.