Привязка нокаута не работает при встроенном редактировании

Я пытался создать встроенное редактирование с нокаутом.

  • Я создал «диапазон» и «ввод» для одного и того же поля.
  • При щелчке диапазона я скрываю диапазон и «показываю» «ввод».
  • Но изменение на входе не отражается на пролете.

Мое поле HTML

<td>
    <span data-bind="text: name" style="display: inline;">Furious Lizard</span> 
    <input data-bind="value: name" style="display: none;" type="text">
</td>

Мой код для встроенного кода

$('td').on('click', function () {
    var spanElement = $(this).find('span');
    $(this).find('span').hide();
    $(this).find('input').show().select().on('blur', function () {
        $(this).hide();
        spanElement.show();
    });
});

Почему не работает привязка?

JSFiddle


javascript json observable jquery knockout.js
person Okky    schedule 13.12.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я считаю, что причина в том, что даже если вы привязываетесь к observableArray, свойства ваших объектов сами по себе не наблюдаемы, поэтому, когда свойство изменяется, другие связанные элементы не уведомляются об изменении.

Я отредактировал ваш пример: http://jsfiddle.net/879Pk/3/

Там вы можете видеть, что первый элемент в ваших данных, а не просто стандартные свойства, они также доступны для наблюдения:

{
    name: ko.observable("Well-Travelled Kitten"),
    model: ko.observable(352),
    price: 75.95
}

ПРИМЕЧАНИЕ. Я не менял цену, поскольку вы используете ее для расчетов ниже. Чтобы это работало, вам нужно изменить все цены, чтобы они были наблюдаемыми, а затем во время вычислений фактически вызывать наблюдаемые (используя круглые скобки), чтобы получить фактическое значение.

Чтобы не создавать наблюдаемые объекты для каждого свойства вручную, в Knockout есть подключаемый модуль под названием «Mapping» (http://knockoutjs.com/documentation/plugins-mapping.html).), который делает именно это, используя следующий синтаксис:

var viewModel = ko.mapping.fromJS(data);

Теперь, что касается вашего второго JSFiddle, я только что внес несколько исправлений: http://jsfiddle.net/879Pk/5/

Когда вы добавляли элемент, свойства нового элемента не наблюдались, и вы также пропускали круглые скобки при оценке свойства цены.

person Pablo Romeo    schedule 13.12.2013
comment
Можете ли вы подсказать мне, как это сделать? я новичок в этом деле - person Okky; 13.12.2013
comment
Есть ли способ отобразить весь JSON в наблюдаемый. - person Okky; 13.12.2013
comment
Привет, я обновил свой код jsfiddle.net/879Pk/4 Как изменить сумму на этот раз ? - person Okky; 13.12.2013
comment
Только что обновил мой ответ, если вам интересно, почему ваша вторая попытка не сработала. Но все же идите на маппинг, это намного проще и меньше кода. - person Pablo Romeo; 13.12.2013
comment
к. Но в вашем обновлении, если мы изменим цену с помощью встроенного редактирования, итоговая сумма будет неверной. - person Okky; 13.12.2013
comment
Правильно, потому что при обновлении значения свойство вместо числа становится текстом. Я его немного изменил, чтобы при расчете цена возвращалась к float. jsfiddle.net/879Pk/8 - person Pablo Romeo; 13.12.2013
comment
Я починил это. Это было связано с отсутствием parseInt. Большое спасибо, чувак :) - person Okky; 13.12.2013
comment
Не за что, рад помочь ;) - person Pablo Romeo; 13.12.2013
comment
Есть еще одно сомнение. Почему встроенное редактирование для строки, созданной с помощью «добавить», не работает? jsfiddle.net/sreekeshokky/vzTh8/2 - person Okky; 13.12.2013
comment
давайте продолжим это обсуждение в чате - person Okky; 13.12.2013

arrow_upward
0
arrow_downward

Вы хотите, чтобы данные, записанные на входе, были видны в элементе span в виде текста? $(this).find('span').html($(this).find('input').val());

person Catalin Sterian    schedule 13.12.2013