knockout js remove函数不适用于嵌套表

Question

我一直试图用'删除comp'链接删除配方元素，但我不确定它为什么不起作用。此外，“添加另一个组合”链接正在运行一次，但不是多次。 我正在使用Knockout.js，任何解释为什么这不起作用将会非常有用。

    $( document ).ready(function() {
var initialData = [
    
];
 
var brandNamesModel = function(brandNames) {
    var self = this;
    self.brandNames = ko.observableArray(ko.utils.arrayMap(brandNames, function(drug) {
        return { brandName: drug.brandName, formulations: ko.observableArray(drug.formulations), compositions: ko.observableArray(drug.compositions) };
    }));
 
    self.addBrandName = function() {
        self.brandNames.push({
            brandName: "",
            formulations: ko.observableArray(),
            compositions: ko.observableArray()
        });
    };
 
    self.removeBrandName = function(drug) {
        self.brandNames.remove(drug);
    };
 
    self.addFormulations = function(drug) {
        drug.formulations.push({
            compositions: ko.observableArray()
        });
    };
 
    self.removeFormulations = function(formulation) {
        $.each(self.brandNames(), function() { this.formulations.remove(formulation) })
    };
    
    self.addComposition = function(drug) {
        drug.compositions.push({
            type: "",
            number: ""
        });
    };
 
    self.removeComposition = function(composition) {
        $.each(self.brandNames(), function() { this.compositions.remove(composition) })
    };
 
    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.brandNames), null, 2));
    };
 
    self.lastSavedJson = ko.observable("")
};
 
ko.applyBindings(new brandNamesModel(initialData));        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class='container'>
   <h2>brandNames</h2>
   <div>
      <table>
         <tr>
            <th>Brand name</th>
            <th>formulations</th>
         </tr>
         <tbody data-bind="foreach: brandNames">
            <tr>
               <td>
                  <input data-bind='value: brandName' />
                  <div><a href='#' data-bind='click: $root.removeBrandName'>Delete brand name</a></div>
               </td>
               <td>
                  <table>
                     <tbody data-bind="foreach: formulations">
                         <tr>
                             <td><label>Formulation</label></td>
                             <td><select>
                                     <option>Tablet</option>
                                     <option>Syrap</option>
                                 </select>
                             </td>
                             <td><a href='#' data-bind='click: $root.removeFormulations'>Delete</a></td>
                                    
                             
                             <td>
                               <table>
                                   <tbody data-bind="foreach: compositions">
                                       <tr>
                                       <td><input data-bind='value: type' /></td>
                                       <td><input data-bind='value: number' /></td>
                                       <td><a href='#' data-bind='click: $root.compositions.removeComposition'>Delete comp</a></td>
                                    </tr>
                                   </tbody>
                               </table>
                              <a href='#' data-bind='click: $root.addComposition'>Add another composition</a>
                           </td>
                         </tr>

                     </tbody>
                  </table>
                  <a href='#' data-bind='click: $root.addFormulations'>Add formulations</a>
               </td>
               
            </tr>
         </tbody>
      </table>
   </div>
   <p>
      <button data-bind='click: addBrandName'>Add a drug</button>
      <button data-bind='click: save, enable: brandNames().length > 0'>Save to JSON</button>
   </p>
   <textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
</div>

Answer 1

很明显，您需要formulation对象删除composition。因此，为了获得formulation以及composition，请按照以下方式编写点击装订：

<a href='#' data-bind='click: function() {$root.removeComposition($data, $parent) }'>Delete comp</a>

然后，您可以按如下方式编写删除合成功能：

self.removeComposition = function(composition,formulation ) {
  formulation.compositions.remove(composition);
};

＆＃13;

＆＃13;

$( document ).ready(function() {
var initialData = [
    
];
 
var brandNamesModel = function(brandNames) {
    var self = this;
    self.brandNames = ko.observableArray(ko.utils.arrayMap(brandNames, function(drug) {
        return { brandName: drug.brandName, formulations: ko.observableArray(drug.formulations), compositions: ko.observableArray(drug.compositions) };
    }));
 
    self.addBrandName = function() {
        self.brandNames.push({
            brandName: "",
            formulations: ko.observableArray(),
            compositions: ko.observableArray()
        });
    };
 
    self.removeBrandName = function(drug) {
        self.brandNames.remove(drug);
    };
 
    self.addFormulations = function(drug) {
        drug.formulations.push({
            compositions: ko.observableArray()
        });
    };
 
    self.removeFormulations = function(formulation) {
        $.each(self.brandNames(), function() { this.formulations.remove(formulation) })
    };
    
    self.addComposition = function(drug) {
        drug.compositions.push({
            type: "",
            number: ""
        });
    };
 
    self.removeComposition = function(composition,formulation ) {
      formulation.compositions.remove(composition);
    };
 
    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.brandNames), null, 2));
    };
 
    self.lastSavedJson = ko.observable("")
};
 
ko.applyBindings(new brandNamesModel(initialData));        
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class='container'>
  <h2>brandNames</h2>
  <div>
    <table>
      <tr>
        <th>Brand name</th>
        <th>formulations</th>
      </tr>
      <tbody data-bind="foreach: brandNames">
        <tr>
          <td>
            <input data-bind='value: brandName' />
            <div><a href='#' data-bind='click: $root.removeBrandName'>Delete brand name</a></div>
          </td>
          <td>
            <table>
              <tbody data-bind="foreach: formulations">
                <tr>
                  <td><label>Formulation</label></td>
                  <td><select>
                                     <option>Tablet</option>
                                     <option>Syrap</option>
                                 </select>
                  </td>
                  <td><a href='#' data-bind='click: $root.removeFormulations'>Delete</a></td>


                  <td>
                    <table>
                      <tbody data-bind="foreach: compositions">
                        <tr>
                          <td><input data-bind='value: type' /></td>
                          <td><input data-bind='value: number' /></td>
                          <td><a href='#' data-bind='click: function() {$root.removeComposition($data, $parent) }'>Delete comp</a></td>
                        </tr>
                      </tbody>
                    </table>
                    <a href='#' data-bind='click: $root.addComposition'>Add another composition</a>
                  </td>
                </tr>

              </tbody>
            </table>
            <a href='#' data-bind='click: $root.addFormulations'>Add formulations</a>
          </td>

        </tr>
      </tbody>
    </table>
  </div>
  <p>
    <button data-bind='click: addBrandName'>Add a drug</button>
    <button data-bind='click: save, enable: brandNames().length > 0'>Save to JSON</button>
  </p>
  <textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
</div>

＆＃13;

＆＃13;

＆＃13;