Добавить новый элемент с несколькими свойствами в knockout.js

Question

Я пытаюсь добавить новый элемент в наблюдаемый массив при нажатии кнопки. Я в значительной степени следую этому примеру на сайте knockout.js: http://knockoutjs.com/examples/betterList.html

Вот соответствующий HTML:

<form data-bind="submit:addItem">
    <input id="comment" data-bind="value:itemToAdd.comment, valueUpdate: 'afterkeydown'" />
    <input type="submit" value="Save contact" />
</form>

Как видите (в этом отличие от примера), у моего "itemToAdd" будет несколько свойств, одним из которых является "comment". Поэтому я пытаюсь связать это так: «value: itemToAdd.comment» (я также пытался «value: itemToAdd (). Comment»). Но это не похоже на работу. Вот соответствующая часть моей модели зрения:

var viewModel = {


     contactHistory: [{comment: 'test', date: '12/12/2011'}, {comment: 'test2', date: '12/11/2011'}],

    itemToAdd: new ko.observable({ comment: 'dd', date: '' }),

    addItem: function () {
            alert(this.itemToAdd().comment);
                if (this.itemToAdd().comment != "")
                {
                    this.contactHistory.push(this.itemToAdd());
                }
            }
}

В предупреждении всегда отображается «dd», поэтому itemToAdd, по-видимому, неправильно привязан к текстовому полю. Кто-нибудь знает, что я делаю не так?

Answer 1

обычно вы делаете itemToAdd().comment, но KO на самом деле не может правильно писать, когда свойство в привязке данных не является наблюдаемым и вложено.

Вы, безусловно, можете решить эту проблему, сделав comment наблюдаемой, например: http://jsfiddle.net/rniemeyer/mFkGT/. Вам не нужно иметь itemToAdd наблюдаемой в этом случае, если вы не хотите, чтобы это было. 1008 *

Другим вариантом было бы попасть в область действия itemToAdd до привязки к comment. В версии 1.3 вы можете использовать with: itemToAdd, например: http://jsfiddle.net/rniemeyer/SDAhd/.. Если вам не нужен дополнительный интервал, вы можете использовать привязку без контейнера, например: http://jsfiddle.net/rniemeyer/ZmDwW/.

.

До версии 1.3 вы могли использовать привязку шаблона с параметром data, чтобы сделать что-то вроде: http://jsfiddle.net/rniemeyer/sb6vD/