Knockout pożary zmieniają zdarzenie, gdy lista wyboru inicjuje listę.

Question

Mam problem z wiązaniem listy wyborów, no cóż, mam problem z listą pozycji, która zawiera opis, klucz i możliwość edycji. używając listy przedmiotów wypełniających pole wyboru.

var RequiredItemLine = function() { 
      var self = this; 

      self.desc = ko.observable(); 
      self.key = ko.observable(); 
      self.editable = ko.observable(false); 

      self.requireditemsdata = ko.observableArray([ 
       { desc: "Boarding of exposed wall openings in the vicinity of ...", key: "233", editable: true }, 
       { desc: "Call in manufacturers to initiate repairs on ...", key: "242", editable: true }, 
       { desc: "Call in specialist restorers/recoverers for ...", key: "244", editable: true }, 
       { desc: "Dispatch items for repair (schedule enclosed)", key: "243", editable: false }, 
       { desc: "Drying and cleaning of contents comprising ...", key: "240", editable: true }, 
       { desc: "Drying and protective oiling of water affected equipment", key: "241", editable: false }, 
       { desc: "Drying out of the affected areas of the premises", key: "235", editable: false }, 
       { desc: "Removal and repackaging of stock comprising ...", key: "239", editable: true }, 
       { desc: "Removal of agreed vulnerable contents to a place of safety (schedule enclosed) ", key: "236", editable: false }, 
       { desc: "Segregation of affected and unaffected stock comprising ...", key: "238", editable: true }, 
       { desc: "Temporary covering of roof to reinstate water tight integrity ", key: "234", editable: false }, 
       { desc: "Temporary guarding of affected area", key: "237", editable: false }, 
       { desc: "Temporary shoring of affected structure", key: "232", editable: false }]); 

      self.selectedItem = ko.observableArray([]); 

      self.selectedItem.subscribe(function (newValue) { 

       if (newValue) { 
        self.editable(newValue.editable); 
        //alert(newValue.editable); 
       } 
      }); 

     } 

gdy użytkownik wybierz opcje z listy select, zawiera właściwość edycji, a następnie wybierz Lista musi ukrywać się przed DOM i pole tekstowe musi być widoczny dla DOM i wartość musi przypisane od wybrany opis z listy wyboru.

 var RequiredItems = function() { 

      var self = this; 

      self.requiredItemSelection = ko.observableArray([]); 

      self.addRequiredItem = function() { 
       self.requiredItemSelection.push(new RequiredItemLine()); 

      }; 
      self.removeRequiredItem = function (line) { 
       self.requiredItemSelection.remove(line); 
      }; 

     } 

     var vm = new RequiredItems(); 
     ko.applyBindings(vm); 

problemem jest to, ilekroć select jest ładowanie do zdarzenia zmiany DOM jest wypalanie i wyświetlenie listy wyboru lub pole wprowadzania.

   <div class='liveExample' > 

    <button data-bind='click: addRequiredItem'>Add Required Item</button> 
    <hr /> 

<table width='100%'> 

    <tbody data-bind='foreach: requiredItemSelection' > 
     <tr> 
      <td > 
       <select data-bind='options: requireditemsdata, optionsText: "desc", value: selectedItem'> </select> 
      </td> 

      <td> 
       <a href='#' data-bind='click: $parent.removeRequiredItem'> <img src="../images/Close.gif" /></a> 
      </td> 
     </tr> 
     <tr data-bind="visible : selectedItem().editable"> 
      <td> 
       <div class="editablecontent" data-bind='html : selectedItem().desc.replace(/\.\.\./g, "<span style=&#39;background-color:#ff77ee;margin-left:-2px;letter-spacing:0.05em&#39; contenteditable >...</span>")'></div> 


      </td> 
     </tr> 

    </tbody> 
</table> 

<ul data-bind='foreach: requiredItemSelection'> 


    <li data-bind="text : selectedItem().desc "></li> 
</ul> 




</div> 

zobaczyć na skrzypcach http://jsfiddle.net/aroor/VFv4H/3/ Uwaga: Nie chcę używać wiązania optionsCaption. czy jest jakiś sposób rozwiązania tego problemu? Czy nie zadeklarowałem poprawnie struktury danych?

Answer 1

Nie zostanie uruchomiony, jeśli ustawisz wartość domyślną.

Napisz coś w optionsCaption. Użyj tej składni, aby dodać podpis:

<select data-bind="options: xxxx, 
        optionsCaption:'select', 
        optionsText: yyyy, 
        value: jjjjj"> 
</select> 

albo można użyć optionsCaption jak pokazano poniżej

<select data-bind="options: xxxx, 
       optionsCaption: ' ', 
       optionsText: yyyy, 
       value: jjjjj"> 
</select> 

Answer 2

Natrafiłem na ten wpis, szukając odpowiedzi na to pytanie. Nie jestem pewien, czy to nadal jest problem, ale może skorzysta następna osoba.

Jeśli dobrze rozumiem, problem polega na tym, że zdarzenia typu knockout wiążą dane, eliminując tym samym niepożądaną logikę. Zrobiłem kilka porównań rzeczywistych zdarzeń JavaScript i odkryłem, że zdarzenia wywołane przez nokaut mają różne właściwości, które są wywołane przez interakcje użytkownika.

Oto, jak to rozwiązałem, sprawdzając obecność tych właściwości.

Zamiast tego:

self.addRequiredItem = function() { 
    self.requiredItemSelection.push(new RequiredItemLine()); 
}; 

Spróbuj tego:

self.addRequiredItem = function (ko_object, js_evt) { 
    if(js_evt.cancelable === false) { 
     self.requiredItemSelection.push(new RequiredItemLine()); 
    } 
}; 

można i należy wykorzystać fakt, że można przekazać nokaut model i zdarzenia JavaScript do wydarzeń. Wydaje się, że właściwość cancelable nie występuje w zdarzeniach knockout dom, więc sprawdziłem, czy zdarzenie zostało wywołane przez użytkownika.