knockout - muss eine Ansicht mit einem Objekt eines Arrays aktualisieren

Question

Ich habe ein Array von Objekten, in denen jedes der Objekte Elemente eines bestimmten Modales definiert, das ich anzeigen möchte. so ist es wie.

var data = [{view1:"hello", view2:"world"}]; 

var viewModel = { 
    currentView: ko.observable({}) // are objects observable? 
}; 

Dann wenn ich das modale laden, bekomme ich das Objekt aus dem Array.

var getDataForView = function (id) { 
     var result = data.filter(function (obj) { 
      return obj.Id == id; 
     }); 
     return result; 
    }; 

Dann laden Sie das Objekt als aktuelle Ansicht.

var singleViewData = getDataForView(id); 
viewModel.currentView(singleViewData); 

Das Objekt scheint nicht zu aktualisieren? Wenn ich verschiedene Ansichten anrufe. Was mache ich hier falsch, was ist der richtige Weg?

Answer 1

getDataForView gibt ein Array zurück. Außerdem enthalten die von Ihnen bereitgestellten Testdaten keine Objekte mit der Eigenschaft Id.

Wenn Sie diese Probleme zu beheben, funktioniert alles wie erwartet:

var data = [{ 
 
    view1: "hello", 
 
    Id: 0 
 
}, { 
 
    view2: "world", 
 
    Id: 1 
 
}]; 
 

 
var viewModel = { 
 
    currentView: ko.observable({}) // are objects observable? 
 
}; 
 

 
var getDataForView = function(id) { 
 
    var result = data.filter(function(obj) { 
 
    return obj.Id == id; 
 
    }); 
 
    return result; 
 
}; 
 

 
ko.applyBindings(viewModel); 
 

 
var singleViewData = getDataForView(0)[0]; 
 
viewModel.currentView(singleViewData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div data-bind="with: currentView"> 
 
    <pre data-bind="text: JSON.stringify($data, null, 2)"> 
 

 
</pre> 
 

 
</div>

Statt .filter()[0] Sie auch Array.prototype.find wenn Ihr Browser unterstützt es erlaubt nutzen könnten.

Answer 2

würde ich ein

berechnet

var data = [{view1:"hello", view2:"world"}]; 

var viewModel = { 
    views  : ko.observable(data), 
    currentId : ko.observable('view1') 
}; 
viewModel.currentView = ko.computed(function(){ 
    var cid = viewModel.currentId(); 
    var views = viewModel.views(); 
    if(views.hasOwnProperty(cid)){ 
     return views[cid]; 
    } else { 
     return ""; 
    } 
}); 

Answer 3

Ich glaube, Ihre Frage verwenden, warum Ihre Ansichten werden die Werte in ihnen nicht aktualisieren. Der Grund dafür ist, dass, während currentView beobachtbar ist, die Daten, die darin enthalten sind, NICHT beobachtbar sind. Wenn Sie die Werte 'Hallo' und 'Welt' aktualisieren möchten, müssen sie auch beobachtbar sein. Ich bin sicher, dass Ihr Beispiel etwas gekünstelt ist und dass Sie das tun IDs in Ihre Daten haben - aber die Antwort auf Ihre Frage lautet:

• Wenn Sie einen Wert wollen, dann muss sie aktualisiert werden, eine beobachtbare sein oder Es wird nicht aktualisiert. Dies bedeutet die einzelnen Eigenschaften und nicht nur das Objekt, zu dem sie gehören.

var data = [{ id: 123, view: ko.observable("hello") }, 
 
      { id: 456, view: ko.observable("world") }]; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.currentView = ko.observable() // anything can be observable 
 
}; 
 

 
var getDataForView = function(id) { 
 
    var result = data.filter(function(obj) { 
 
     return obj.id == id; 
 
    }); 
 
    if (result.length === 0) 
 
     return; 
 
    return result[0].view(); 
 
    }; 
 

 
var vm = new ViewModel(); 
 
vm.currentView(getDataForView(456)); 
 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input type="text" data-bind="textInput: currentView"/> 
 
<br/> 
 
<br/> 
 
Current view: <b data-bind="text: currentView"></b>