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 eine observable
  • 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

Schreibe einen Kommentar