如何在基因敲除的基礎上訪問特定div的模板索引？

Question

我有一個模板，每次點擊添加按鈕時都會在html頁面中重複使用。我想根據特定索引訪問輸入ID爲selectListGroup的輸入。 例如：如果用戶在第二個模板上，我想僅對第二個模板禁用selectListGroup。

<script type="text/html" id="attributeTemplate"> 
    <div class="margin_top10"> </div> 
    <div class="oj-flex cls_main_template" data-bind="attr: {index:$index()}"> 
     <div class="oj-flex-items-pad oj-sm-1 alignCenter " > + </div> 
     <div class="oj-flex-items-pad oj-sm-11 " > 
      <div class="oj-padding oj-panel-alt2" style="border:1px solid #e8e8e8;border-radius:5px;"> 
       <div class="oj-flex"> 
        <div class="oj-sm-4"> 
         <div class="padding10"> 
          <select id="selectListCondition" data-bind="ojComponent: {component: 'ojSelect', 
                  optionChange:function(event,ui){$parent.Onchg_Condition(event, ui, $index())}, 
                  rootAttributes: {style:'max-width:10em'}}"> 
           <option value="AND">AND</option> 
           <option value="OR">OR</option> 
          </select> 
         </div> 
        </div> 
        <div class="oj-sm-4"></div> 
        <div class="oj-sm-4"> 
         <div class="padding10 floatRight"><button class="margin-left3 deleteBtn" data-bind="click:function(event, ui) {$parent.btnDeleteConditionClick(event, ui, $element, $index());}, ojComponent: {component: 'ojButton', label: 'Delete Condition'}"> </button> </div> 
        </div> 
       </div> 
       <div class="oj-flex oj-panel-alt1" style="border:1px solid #e8e8e8; border-radius:5px;"> 
        <div id="entityDiv" class="floatLeft padding10 oj-invalid cls_query_input"> 
         <select id="selectListEntity" data-bind="ojComponent: 
              {component: 'ojSelect', 
               options:$parent.arr_entities, 
               optionChange:function(event,ui){$parent.Onchg_Entity(event, ui, $index())}, 
               placeholder: $parent.emptyPlaceholder() ? '' : 'Select Entity', 
              rootAttributes: {style:'max-width:10em'}}"> 
          <option value="Item">Item</option> 
          <option value="Catalog">Catalog</option> 
          <option value="EFF">EFF</option> 
          <option value="Structure">Structure</option> 
          <option value="Relationship">Relationship</option> 
         </select> 
        </div> 
        <div class="floatLeft padding10 cls_query_input" style="width:22%">  
         <input id="selectListGroup" disable 
           data-bind="ojComponent: {component: 'ojSelect', 
            placeholder: $parent.emptyPlaceholder() ? '' :'Select Group', 
            options:$parent.arr_groups, 
            optionChange:$parent.Onchg_Groups, 
            rootAttributes: {style:'max-width:25em'}}"/> 

        </div> 
        <div class="floatLeft padding10 cls_query_input" style="width:20%"> 
         <select id="selectListAttribute" data-bind="ojComponent: 
                {component: 'ojSelect', 
                 optionChange: $parent.Onchg_Attribute, 
                 options: $parent.arr_attributes, 
                placeholder: $parent.emptyPlaceholder() ? '' : 'Select Attribute', 
                rootAttributes: {style:'max-width:25em'}}"> 

         </select> 
        </div> 
        <div class="floatLeft padding10 cls_query_input"> 
         <select id="selectListOperator" data-bind="ojComponent: 
                {component: 'ojSelect', 
                optionChange:$parent.Onchg_Operator, 
                placeholder: $parent.emptyPlaceholder() ? '' : 'Select Operator', 
                rootAttributes: {style:'max-width:20em'}}"> 
          <option value="equal">equal</option> 
          <option value="not_equal">not equal</option> 
          <option value="in">in</option> 
          <option value="not_in">not in</option> 
          <option value="less">less</option> 
          <option value="less_or_equal">less or equal</option> 
          <option value="greater">greater</option> 
          <option value="greater_or_equal">greater or equal</option> 
          <option value="between">between</option> 
          <option value="not_between">not between</option> 
          <option value="is_null">is null</option> 
          <option value="is_not_null">is not null</option> 
         </select> 
        </div> 

        <div class="padding10 cls_query_input"> 
         <div class="floatLeft" data-bind="if:$parent.showText"> 
          <input class="cls_textInput" type=text data-bind="ojComponent: {component: 'ojInputText'}" 
            placeholder="Enter the attribute Value"/> 
         </div> 
         <div class="floatLeft" data-bind="if:$parent.showNumber"> 
          <input data-bind="ojComponent: {component: 'ojInputNumber', 
                  value: $parent.numberAttrValue}" 
            placeholder="Enter the attribute Value"/> 
         </div> 
         <div class="floatLeft" data-bind="if:$parent.showDate"> 
          <input data-bind="ojComponent: {component: 'ojInputDate', 
                  value: $parent.dateAttrValue}" 
            placeholder="Enter the attribute Value"/> 
         </div> 
        </div> 
        <div class="oj-messaging-inline-container" aria-live="polite" data-bind="if:$parent.showErrorMsg"> 
         <div class="oj-message oj-message-error"> 
          <span class="oj-component-icon oj-message-status-icon oj-message-error-icon" title="Error" role="img"></span> 
          <div class="oj-message-content"> 
           <div class="oj-message-summary">Error</div> 
           <div class="oj-message-detail"> 
            <span data-bind="text:$parent.error_messageDetails"></span> 
           </div> 
          </div> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</script> 

我有以下函數，當實體下拉列表更改爲特定模板時調用。

self.Onchg_Entity = function (context, data, index) { 

}; 

基於該數據，我想selectListGroup到對於該特定索引

Answer 1

這將產生具有selectListGroup相同的ID，這是無效的HTML多個控件被禁用。

充分利用ID動態使用attr綁定：

data-bind="attr: { id: 'selectListGroup' + someNumericVar() }"

其中someNumericVar是根據你點擊添加次數在您的視圖模型的自動遞增的財產。

實際上，它看起來像你有一個自定義綁定具有rootAttributes屬性;使用該代替attr。