Knockout JS `hasFocus` innerhalb Vorlage, die zweimal

genannt wird, habe ich eine Vorlage, die in docs hasFocus ähnlich dem Beispiel verwendet: http://knockoutjs.com/documentation/hasfocus-binding.html Knockout JS `hasFocus` innerhalb Vorlage, die zweimal

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>field test</title> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <style> 
     body { 
      margin-top: 1em; 
     } 
    </style> 
    <script src="https://cdn.jsdelivr.net/g/[email protected],[email protected],[email protected]"></script> 
    <script> 

     $(function() { 

      var VM = function() { 

       var model = {}; 

       model = { 
        one: ko.observable(false), 
        two: ko.observable(false) 
       }; 

       this.model = model; 

      }; 

      ko.applyBindings(new VM()); 

     }); 

    </script> 
</head> 
<body> 
    <script type="text/template" id="first-template"> 
     <input type="text" class='form-control' data-bind="hasFocus: model.one"> 
     <p>one has<span data-bind="visible: !model.one()"> not got</span> focus now</p> 
     <input type="text" class='form-control' data-bind="hasFocus: model.two"> 
     <p>two has<span data-bind="visible: !model.two()"> not got</span> focus now</p> 
    </script> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <div data-bind="template: { name: 'first-template' }"></div> 
       <!-- if I uncomment the next line, it stops working... --> 
       <!-- <div data-bind="template: { name: 'first-template' }"></div> --> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

alles funktioniert wie erwartet, auf dem Modell den Fokus Zustandsaktualisierungs richtig beim Betreten und Verlassen des Feldes. Wenn ich die Vorlage jedoch ein zweites Mal anwende, scheint die Vorlage mit Ausnahme des Fokusstatus in Ordnung zu sein. Wird dies nicht unterstützt, oder führe ich etwas falsch um? Wie kann ich die Vorlage mehrmals verwenden und weiterhin den Fokusstatus verwenden?

Quelle

2016-04-01 Billy Moon

Der Browser kann nicht zwei <input> Elemente mit Fokus haben. Die hasFocus Bindung versucht, beide Elemente einen fokussierten Zustand zu geben. Sie können mit event Bindungen für beide focus und blur Ereignisse dieses Verhalten umgehen:

data-bind="event: { 
    focus: function() { 
    model.one(true) 
    }, 
    blur: function() { 
    model.one(false) 
    } 
}"

Schauen Sie sich diese Geige für ein funktionierendes Beispiel Code: https://jsfiddle.net/77meefmf/

Quelle

2016-04-01 15:32:54 user3297291

Sie müssen Sie jede Kopie der Vorlage machen hat sein eigenes Viewmodel. Die hasFocus Bindung soll den Fokusstatus ein einzelnes Feld darstellen. Wenn Sie es an mehr als ein Feld binden, werden die Ergebnisse falsch sein.

Quelle

2016-04-01 23:37:04

Knockout JS `hasFocus` innerhalb Vorlage, die zweimal

Antwort

Verwandte Themen