Mẫu Knockoutjs foreach, mục đầu tiên đặc biệt

Question

Vì vậy, tôi đã phá vỡ bộ não của tôi để tìm hiểu điều này. Tôi có một foreach, khạc ra các mẫu, và tôi muốn phần tử đầu tiên có một thuộc tính đặc biệt. Cho đến nay các giải pháp tôi đã tìm thấy havent làm việc.

Đây là foreach:

<h3 class="question">Geografi</h3> 
     <p class="answer" data-bind="template: { name: 'geographyTmpl', foreach: geographyList, templateOptions: { selections: selectedGeographies } }"></p> 

Đây là mẫu:

<script id="geographyTmpl" type="text/html"> 
<input class="geoCheckList" validate="required:true, minlength:2" name="geoCheckList[]" type="checkbox" data-bind='value: $data, attr: { id: "Geo"+$index()},checked: $root.selectedGeographies' /> 
<label data-bind="text: $data, attr: { 'for': 'Geo'+$index()}"></label> 

Và tôi muốn thêm: "xác nhận =" yêu cầu: đúng, MINLENGTH: 2" thành phần tử đầu tiên

Tôi cần làm gì?

Nếu nó giúp, nó để xác nhận jQuery.

Answer 1

kiểm tra câu trả lời của tôi cho câu hỏi khác về phần tử đầu tiên trong KnockoutJS foreach

Skip item in foreach knockout js array?

<div data-bind="text: ItemsArray[0].someProperty"></div> 
<div data-bind="foreach: ItemsArray"> 
<!-- ko if: $index() == 0 --> 
    <div data-bind="text: someProperty"></div> 
<!-- /ko --> 
<!-- ko if: $index() != 0 --> 
    <div data-bind="text: anotherDifferentProperty"></div>  
<!-- /ko --> 
</div> 

Answer 2

Bạn sẽ có thể sử dụng tính toán có thể quan sát để trả về boolean và nếu boolean là true, bạn hiển thị thuộc tính (loại bỏ tiêu chuẩn)?

một cái gì đó như thế này có lẽ

this.IsFirst = ko.computed(function() { 
    return this == Array[0]; 
}, this); 

có vẻ như hacky nhưng nên làm việc

hoặc sử dụng

{{if $item.first === $data}} 

Answer 3

tôi muốn được cám dỗ sử dụng custom binding chứ không phải là một mẫu, và sau đó nhận chỉ số $ ra khỏi bindingContext và thêm thuộc tính xác thực chỉ khi $ index là 0.

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     // Create your input and label elements here then 
     $(element).append(// add your new elements in here); 
    } 
};