Удаление элемента из вложенной структуры данных

#javascript #jquery #knockout.js

Вопрос:

В настоящее время я работаю над knockout.js фреймворк. Я нахожу это простым и отличным в реализации. Я работаю над формой контактов, аналогичной их примеру, показанному на knockoutjs.com . Форма состоит из нескольких полей, которые могут быть динамически добавлены или удалены. Здесь я натыкаюсь на стену: я пытаюсь отключить delete кнопку, если в форме осталось менее 2 контактных полей. Однако это вызывает проблемы и приводит к неправильному отображению формы и отключению функции удаления. Вот полный код: JSFIDDLE

knockout.js

 var ContactsModel = function(contacts) {
    var self = this;
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) {
        return { firstName: contact.firstName, lastName: contact.lastName, phones: ko.observableArray(contact.phones) };
    }));

    self.addContact = function() {
        self.contacts.push({
            firstName: "",
            lastName: "",
            phones: ko.observableArray()
        });
    };

    self.removeContact = function(contact) {
        self.contacts.remove(contact);
    };

    self.addPhone = function(contact) {
        contact.phones.push({
            type: "",
            number: ""
        });
    };

    self.removePhone = function(phone) {
        $.each(self.contacts(), function() { this.phones.remove(phone) })
    };

    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
    };

    self.lastSavedJson = ko.observable("")
};

ko.applyBindings(new ContactsModel(initialData));

HTML

  <div><a href='#' data-bind='click: $root.removeContact, enable: contacts().length < 2'>Delete</a></div>

1. Вам действительно следует показать соответствующий HTML и код в этом сообщении. Вопросы, которые не имеют существенного значения без внешней ссылки, не разрешены здесь, в StackOverflow, по целому ряду причин, но главная из них заключается в том, что они легко становятся недействительными вопросами (бесполезными в будущем) при изменении или удалении внешней ссылки.

Ответ №1:

Во-первых, ваша привязка неправильная, должна быть enable: $root.contacts().length > 2 ,

Во-вторых, enable привязка НЕ работает с anchor тегом, она работает только с input, select и textarea.

Пожалуйста, подумайте о том, чтобы скрыть это или добавить условие в вашу removeContact реализацию.

http://jsfiddle.net/gZC5k/2284/

 <div data-bind="if: $root.contacts().length > 2">
  <a href='#' data-bind='click: $root.removeContact'>Delete</a>
</div>

1. еще одна ваша мысль removePhone , лучше предоставить объекту contact конструктор и перенести removePhone реализацию на сам объект contact, чтобы вам не приходилось выполнять сумасшедший цикл с контактами для простого удаления одного телефонного номера.

2. Теперь это имеет смысл. Моя привязка была неверной. Отлично! Вы правы. Я изменюсь removePhone на объект contact.

Ответ №2:

У меня плохо работал JSFiddle, но, если я правильно понимаю, ссылка на удаление не отключается должным образом.

Я заметил, что в вашем HTML у вас было это:

 <a href='#' data-bind='click: $root.removeContact, enable: contacts().length > 0'>Delete</a>

Это все равно позволит включить ссылку, если у вас есть 1 или более элементов. Если вы хотите отключить его, когда у вас есть 1 или меньше, вам нужно, чтобы это было так:

 <a href='#' data-bind='click: $root.removeContact, enable: contacts().length > 1'>Delete</a>

Дайте мне знать, если это не ответило на ваш вопрос.