Knock-out changements observables pas détecté si la valeur a changé de l'extérieur

Dans l'exemple que vous fournissez, vous êtes à la mise à jour de la zone de saisie avec ce code:

this.setAgeExternally = function(){
    $('input').val(0);
}

Considérant que l'entrée est lié à l'âge de la propriété, il serait plus simple de le faire:

this.setAgeExternally = function(){
  this.age(0);
}

Cependant, ce n'est même pas vraiment nécessaire, comme l'âge de la propriété est exposée sur votre viewmodel. Donc le code externe pourrait juste faire cela, et les setAgeExternally méthode n'est pas vraiment nécessaire:

model.age(0);

Nous allons revenir à votre problème d'origine - celui que vous décrivez, mais ne poste pas de code pour. Vous mentionnez que vous avez une liste de boîtes de saisie lié à un observables tableau.

Il est intéressant de gotcha, vous devez être conscient de lorsque vous travaillez avec une observable tableau:

À partir de la documentation à http://knockoutjs.com/documentation/observableArrays.html:

Point-clé: Un observableArray pistes les objets qui sont dans le tableau,
pas en l'état de ces objets

Simplement mettre un objet dans un observableArray ne pas faire tout de
propriétés de l'objet en eux-mêmes observables. Bien sûr, vous pouvez
faire ces propriétés observables si vous le souhaitez, mais c'est une
choix indépendant. Un observableArray juste des pistes qui objets qu'il
tient, et informe les auditeurs lorsque les objets sont ajoutés ou supprimés.

Étant donné les exigences de votre liste, il n'y a pas besoin de jQuery à tous. Vous pouvez essayer cette troisième partie de la solution:

1. Faire de votre observableArray contiennent des observables. Donc, si vous voulez retrouver avec quelque chose comme:

   var model = function() {
     this.ages = ko.observableArray([
       {age: ko.observable(13)},
       {age: ko.observable(18)},
       {age: ko.observable(16)},
       {age: ko.observable(13)}
     ]);
   };

2. Ensuite, créez un knock-out extender qui remet à 0 automatiquement si le champ est vide

   ko.extenders.defaultIfBlank = function(target, defaultValue) {
     var result = ko.computed({
       read: target,  //always return the original observables value
       write: function(newValue) {
           if (newValue == "") {
             target(defaultValue);
           } else {
              target(newValue);
           }
       }
     });
   
     //initialize with current value to make sure it is not blank
     result(target());
   
     //return the new computed observable
     return result;
   };

3. Appliquer le multiplicateur à l'observables dans votre tableau

   var model = function() {
     this.ages = ko.observableArray([
       ko.observable(13).extend({defaultIfBlank: "0"}),
       ko.observable(18).extend({defaultIfBlank: "0"}),
       ko.observable(16).extend({defaultIfBlank: "0"}),
       ko.observable(13).extend({defaultIfBlank: "0"})
     ]);
   };

De travail violon: http://jsfiddle.net/tlarson/GF3Xe/

OriginalL'auteur CodeThug

Utilisés Michael Meilleure suggestion:

C'est le code qui a fonctionné pour moi:

function insertControlsAtcaret(element, addControlText){
    if (element.selectionStart || element.selectionStart == '0') {
        //For browsers like Firefox and Webkit based
        var startPos = element.selectionStart;
        var endPos = element.selectionEnd;
        var scrollTop = element.scrollTop;
        element.value = element.value.substring(0, startPos) + addControlText + element.value.substring(endPos, element.value.length);
        $(element).trigger("change");
        element.focus();
        element.selectionStart = startPos + addControlText.length;
        element.selectionEnd = startPos + addControlText.length;
        element.scrollTop = scrollTop;
    } else {
        element.value += addControlText;
        $(element).trigger("change");
        element.focus();
    }
};

Thx MO, sauvé mon temps... 🙂

OriginalL'auteur SAZZ