Блог

У меня есть ViewModel с массивом объектов answerGroup. Когда свойство обратной связи одного из объектов answerGroup обновляется, я хочу сохранить обновленный объект в своей базе данных, передав его через ajax в мой ASP.Net Приложение MVC.

Вместо обычной кнопки сохранения или ссылки я хочу, чтобы объект передавался вызову Ajax при обновлении свойства объекта. Я думал, что смогу сделать это путем привязки к событию изменения элемента textarea, но если я сделаю это, вызывается функция ajax, но свойство обратной связи базового объекта answerGroup не обновляется.

Я использую Knockout 1.2.1. Ниже приведен код JavaScript, я не включил HTML.

Я делаю это неправильно, или это просто мой синтаксис для knockout.js привязка событий неверна?

 <script>
var viewModel = {}

$(function () {
    viewModel.scenarioId = ko.observable($("#Scenario_ScenarioID").val());
    viewModel.answerGroups = ko.observableArray([]);
    viewModel.addGroup = function (answerGroup) {

        // add item to beginning of array
        this.answerGroups.unshift(answerGroup);
    };

    ko.applyBindings(viewModel);
});

function answerGroup() {
    this.id = ko.observable();
    this.name = ko.observable();
    this.feedback = ko.observable();

    // the groups feedback has been updated so save
    // these details back to the server
    this.updateGroup = function (event) {

      // javascript api library that is an ajax function.
      // this works without a problem.
      api.updateAnswerGroup({
        success: function (result) {
            alert("saved!");
        },
        error: function (e) {
           alert("error!");
        },
        data: "answerGroupId="   this.id   "amp;feedback="   this.feedback
      });

      return true;
    };
}
</script>

<script id="answerGroupsTemplate" type="text/html">
  <div>
    <h4><a href='#'>${ $data.name }</h4>
    <div>
       <textarea cols="100" rows="2" data-bind="event: { text: feedback, change: updateGroup }">
       </textarea>                  
    </div>
  </div>
</script>
  

Типичный способ справиться с этим в Knockout — выполнить ручную подписку на observable, на котором вы хотите реагировать на изменения.

Итак, вы бы сделали что-то вроде:

 function answerGroup() {
    this.id = ko.observable();
    this.name = ko.observable();
    this.feedback = ko.observable();

    this.feedback.subscribe(function (newValue) {
       //run your update code here
    }, this);
}
  

Второй параметр функции subscribe управляет контекстом («this») при запуске функции.

Приятная часть подобной подписки заключается в том, что она срабатывает, когда наблюдаемое изменяется программно или на основе привязки в вашем пользовательском интерфейсе.

Краткие документы по этому вопросу здесь:http://knockoutjs.com/documentation/observables.html#explicitly-subscribing-to-observables

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

Надеюсь, это поможет.

Я предпочитаю подписываться на наблюдаемое, как описывает Р.П. Нимейер, но иногда вам нужно привязываться к событию, а не к наблюдаемому. Поэтому вы можете использовать привязку «событие». Документация не включает событие «изменить», но я пробовал это с версией v2.0.0rc, и это работает:

 <input data-bind="value: viewModel.MyProperty, event: { change: viewModel.MyPropertyChanged } />
  

http://knockoutjs.com/documentation/event-binding.html