knockout.js로 볼 수있는 동적 양

Question

knockout.js 라이브러리와 관련된 기본적인 질문이 있습니다.

지금까지 숫자와 범위 형식의 입력 필드를 만들었습니다.

<input type="range" min="0.0" max="1.0" step="0.001" data-bind="value: example1" ></input> 
<input type="number" min="0.0" max="1.0" step="0.001" data-bind="value: example1"></input> 

<input type="range" min="0.5" max="2.5" step="0.001" data-bind="value: example2" ></input> 
<input type="number" min="0.5" max="2.5" step="0.001" data-bind="value: example2"></input> 

난 그냥

this.example1 = ko.observable("0.000"); 
this.example2 = ko.observable("0.000"); 

---

내 문제처럼 뭔가를하고있는 중이 야 knockout.js을 활성화하는 웹 사이트가 그 입력 매개 변수의 임의의 금액을받는 것입니다. 일부 프로젝트의 경우 예제 에서처럼 2 개만있는 반면 다른 프로젝트에서는 8 개의 매개 변수를 사용합니다.

어떻게 녹아웃에서 관측 가능량의 동적 양을 지정할 수 있습니까?

감사합니다.

---

편집 :

해결. I는 각 입력에 대해 서로 다른 특성 값을 설정할 수 있었다 바인딩 "ATTR"로

: 선택된 답의 용액에 연속

.

<input type="number" step="0.001" data-bind="value: value, attr: {id: name, min: minValue, max: maxValue}"></input> 

Answer 1

관측 가능한 관측 가능 배열을 사용하면됩니다. 관측 가능한 배열을 만들고, 관측 가능한 배열에 observables가있는 새로운 관측 가능 객체 또는 객체를 서버 .push()가 반환 한 각 결과에 대해 만듭니다.

그런 다음 Dom에서 각 바인딩에 대해 반복하여 각 것을 표시합니다. VM의에서

- 뷰에서 다음

var objectsArray = ko.observableArray(); 

// results from AJAX or w/e 
ko.utils.arrayForEach(results, function (result) { 
    objectsArray.push(new ObjectType(result)); 
}); 

function ObjectType (data) { 
    var self = this; 
    self.SomeProperty = ko.observable(data); 
} 

<div data-bind="foreach: objectsArray"> 
    <input data-bind="value: SomeProperty " /> 
</div> 

jsFiddle 예 - 한편으로

http://jsfiddle.net/zabpe3jm/

Answer 2

는 자바 스크립트를 추가하는 것이 매우 쉽게 필요에 따라 객체에 대한 속성을 지정하므로 가비래하기가 어렵지 않습니다. 당신의 데이터를 정확하게 반영한 뷰 모델.

반면에 까다로운 부분은 동적 뷰 모델을 정확하게 반영하는 data-bind 속성이있는 HTML입니다.

한 가지 가능한 해결책은 두 가지로 뷰 - 모델을 리팩토링하는 것입니다 :

function viewModelContainer(arrData) { 

    var self = this; 

    // this holds a dynamic number of elements, depending upon the data from the server 
    self.Observables = ko.observableArray([]); 

    // using an IIFE as a type of constructor for getting the 
    // `arrData` param into your observable 
    (function(arrData) { 
     // add all elements in a single call so that you don't cause 
     // multiple unnecessary updates to the UI 
     var arr = []; 
     for (var i = 0, iMax == arrData.length; i < iMax; i++) { 
      arr.push(new viewModelData(arrData[i])); 
     } 
     self.Observables.push(arr); 
    }(arrData)); 
} 


function viewModelData(data) { 

    var self = this; 

    self.Data = ko.observable(data); 
} 

을 이제 당신이 얼마나 많은 값을 알고 단일 개체/뷰 - 모델 (viewModelContainer의 인스턴스를)해야 함 포함.

다음 단계는 HTML에서이 (Knockout를 사용하여)을 열거하는 것입니다 :

<!-- ko foreach: Observables --> 
    <input type="range" min="0.0" max="1.0" step="0.001" data-bind="value: Data" ></input> 
    <input type="number" min="0.0" max="1.0" step="0.001" data-bind="value: Data"></input> 
<!-- /ko --> 

내가 쓴 그 무료 손/메모리에서, 당신이 그것을 연마해야 할 수도 있으므로,하지만 당신이 요지를 얻길 바랍니다.

Answer 3

난 당신이 observable를 사용하지 않을 생각하지만, 당신이 입력 매개 변수를 포함하는 몇 가지 소스 배열을 가정, 그리고 observableArray 대신

this.yourObjects = ko.observableArray([]); 

를 사용하여, 당신은 단지 배열에 추가합니다 : 를 렌더링 할

for (var i in sourceArray) { 
    this.yourObjects.push(sourceArray[i]); 
} 

, 단순히 바인딩 foreach 문을 사용

<div data-bind="foreach: yourObjects"> 
    <input type="range" min="0.0" max="1.0" step="0.001" data-bind="value: $data" ></input> 
</div> 

,

"value : $ data"는 항목의 일부 속성은 필요 없지만 항목 자체는 숫자 값과 같기 때문에 사용하는 것에 유의하십시오.