Wie kann ich basierend auf dem Index der Vorlage in knockout auf bestimmte div zugreifen?

Question

Ich habe eine Vorlage, die jedes Mal in der HTML-Seite wiederholt wird, wenn ich auf die Schaltfläche HINZUFÜGEN klicke. Ich möchte auf die Eingabe mit der ID selectListGroup basierend auf einem bestimmten Index zugreifen. Für zB: wenn der Benutzer auf der 2. Vorlage ist, möchte ich selectListGroup nur für die 2. Vorlage deaktivieren.

<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> 

Ich habe die folgende Funktion, die aufgerufen wird, wenn sich das Entity Dropdown für eine bestimmte Vorlage ändert.

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

}; 

Basierend auf den Daten, möchte ich selectListGroup für diesen bestimmten Index

Answer 1

mehrere Steuerelemente mit derselben ID von selectListGroup, Das wird deaktiviert sein, die ungültige HTML erzeugen.

die ID Dynamisierung des attr Bindung mit:

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

wo someNumericVar ist eine automatische Erhöhung Eigenschaft Ihrer Ansicht nach Modell auf der Grundlage der Anzahl den Sie hinzufügen geklickt.

Eigentlich sieht es so aus, als ob Sie eine benutzerdefinierte Bindung haben, die eine rootAttributes Eigenschaft hat; Verwenden Sie das anstelle von attr.