Update observableArray Element auf Bearbeiten
jsFiddle-Beispiel
Ich habe eine observableArray
der auswählbaren Gegenstände (in einer Tabelle). Was ich versuche zu tun ist, öffnen Sie ein modal auf Klick auf die Zeile in der Tabelle, füllen Sie die modal mit den Positionsdetails Bearbeiten zulassen das Element, und speichern Sie dann die änderungen, die - aufbauend auf den aktualisierten Eintrag in der observableArray
. Ich habe alles andere funktioniert so weit, aber kann nicht scheinen, um das array-Element zu aktualisieren.
Bisher habe ich versucht:
- So dass jedes Element in der
observableArray
eineobservable
- mit
.replace
auf das array, um das Element zu aktualisieren - dies funktioniert, aber es ist einfach fühlt falsch - posting zurück, das aktualisierte Element, die Anwendung auf die Datenbank und die erneute Zuordnung der array - obwohl dies funktioniert, ist nicht diese Niederlage, der Punkt, von KnockoutJS?
Habe ich ein jsFiddle link oben, die veranschaulicht, was ich versuche zu erreichen.
View-Modell und die Initialisierung
Fühlen Sie sich frei, um irgendwelche Vorschläge, wie ich bin initialisieren self.selectItem
ich bin derzeit in der Phase des Lernens von KnockoutJS, und so tun durch das Spiel mit mock-Projekte, so dass ich bin offen für jede Konstruktive Kritik.
var items = [{
Id: 1,
Text: 'First item'
}, {
Id: 2,
Text: 'Second item'
}];
var viewModel = function (items) {
var self = this;
self.items = ko.observableArray(items);
self.selectedItemId = ko.observable();
self.item = ko.observable();
self.selectItem = function (item) {
for (var i = 0; i < self.items().length; i++) {
if (self.items()[i].Id === self.selectedItemId()) {
self.item(self.items()[i]);
break;
}
}
};
};
ko.applyBindings(new viewModel(items));
Markup-Bindungen
<select data-bind="options: items, optionsCaption: 'Select...', optionsText: 'Text', optionsValue: 'Id', value: selectedItemId, event: { change: selectItem }"></select>
<div data-bind="if: item">
<input type="text" data-bind="value: item().Text" />
</div>
<table>
<thead>
<tr>
<th>Text</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: $data.Text"></td>
</tr>
</tbody>
</table>
InformationsquelleAutor Paul Aldred-Bann | 2013-07-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich eine neue erstellen jsFiddle Beispiel mit einem update der Elemente, wenn Sie ändern Sie die "Text" - Eigenschaft.
Dein problem war die 'Sachen' - variable. Wenn Sie möchten, um Elemente zu aktualisieren Eigenschaften, die Sie haben, um Sie beobachtbar :
Hoffe, es hilft !
Ich bin komme aus stark typisierten Sprache... ich denke, dass ist der Grund, warum ich verwendet beobachtbaren Klassen für jede Entität 🙂
Genial JofferyKern sir erstaunliche und gute Lösung. Müssen etwas ändern, aber es funktioniert auf mein Ende.
Thx @padhiyar. Fühlen Sie sich frei, den Beitrag aktualisieren, wenn es hilft !
Nein, sir "müssen etwas ändern" bedeutet, auf mein Ende wie pro meine Anforderung nicht in die Antwort sir. 🙂
InformationsquelleAutor Joffrey Kern
Dein code funktionieren. Alles, was Sie brauchen, ist ein update Ihrer
items
array zu haben, es ist EigentumText
zu beobachtenUnd ich füge kleinen code, um zu überprüfen, ob die ausgewählte option "Wählen...", dann deaktivieren Sie das Element zu verstecken, die Eingabe von text.
bitte prüfen Sie daher meine Arbeiten DEMO
InformationsquelleAutor ebram khalil
Müssen Sie zum konvertieren von Text propperty zu beobachten.
Ich wähle zu verwenden,ko.mapping, es zu tun.
ko.mapping.fromJS konvertieren js-Eigenschaften in ko.observablen.
Und in der post-Methode, die ich konvertieren Sie die beobachtbaren viewmodel in raw-Daten.
Geige
InformationsquelleAutor Damien