0

私はこのビューモデルを持っています:

var contactsViewModel = {
      contacts: ko.mapping.fromJS([])                                
};

次のように入力されます。

ko.mapping.fromJS(contactsData, dataMappingOptions, contactsViewModel.contacts);    
ko.applyBindings(contactsViewModel);

マッピングは contactItem モデルから取得されます

var dataMappingOptions = {
     key: function (data) {
        return data.id;
     },
     create: function (options) {
         return new contactItem(options.data);
    }
};

これで、ビュー モデルに追加する selectedItem メソッドができました。

contactsViewModel.selectedItem = ko.observable();

したがって、追加、削除、編集などを行うことができます。ただし、呼び出し時にキャンセルする場合:

contactsViewModel.cancel = function () {
    contactsViewModel.selectedItem(null);
    console.log(contactsViewModel.selectedItem());
};

コンソールに null が表示されますが、編集していたアイテムには最新の変更が表示されます!!? :(

見たい場合のその他のスニペット:

var contactItem = function (data) {
     var self = this;
     self.id = ko.observable(data.id);
     self.email = ko.observable(data.email);
     self.firstName = ko.observable(data.firstName);
     self.lastName = ko.observable(data.lastName);
     self.company = ko.observable(data.company);              
     self.reportsURL = ko.computed(function () {
          return "#/reports/contact/" + self.id;
     });
     // validations:
    ko.validation.configure({
          insertMessages : false
    });
    self.email.extend({
          required: true,
          email: true
    });
    self.firstName.extend({ required: true });
    self.lastName.extend({ required: true });
    self.company.extend({ required: true });
    self.errors = ko.validation.group(self);
};

そして私の編集方法：

contactsViewModel.edit = function (contact) {
    contactsViewModel.selectedItem(contact);
};

そして、このキャンセルを持つテンプレート:

<script type="text/html" id="edit">
        <td class="editMode">
            <input class="span3 animated fadeInDown" data-bind="value: email, validationAlert : email " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: firstName, validationAlert : firstName " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: lastName, validationAlert : lastName " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: company, validationAlert : company " />
        </td>
        <td class="editMode">
            <ul class="rowOptions">
                <li><a href="#" data-bind="click: $parent.save" title="Save your edits">Save<i class="icon-ok"></i></a></li>
                <li><a href="#" data-bind="click: $parent.cancel" title="Cancel editing">Cancel<i class="icon-remove-circle"></i></a></li>
            </ul>
        </td>
</script>
4

1 に答える 1

1

selectedItem を設定すると、オブジェクトへの参照に設定されます。したがって、編集を行うと、それらは実際のオブジェクトに対して行われます。

  • 1 つのオプションは、オブジェクトのコピー/クローンを作成して編集し、それを置き換えることです。

  • もう 1 つのオプションは、(マップされる前に) 元のデータを追跡し、キャンセル時にそれを使用して元のデータを再作成することです。

  • それ以外の場合は、 http ://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html のような手法を使用して、個々のオブザーバブルへの編集を受け入れる/キャンセルすることができます。

于 2012-11-10T01:53:24.260 に答える