KnockoutJS, обновление ViewModel после вызова ajax - PullRequest
10 голосов
/ 25 декабря 2010

Я использую Knockout и плагин Knockout Mapping.

  • Мое действие MVC3 возвращает представление, а не JSON напрямую, поэтому я преобразую свою модель в JSON.
  • ЭтоФорма ввода данных и в связи с характером проверки системы все делается на уровне обслуживания, с предупреждениями, возвращаемыми в объекте Response в ViewModel.
  • Первоначальные привязки и обновления работают правильно, это «пост-обновление»"поведение, которое вызывает у меня проблему.

Моя проблема заключается в том, что после вызова AJAX POST и получения моего нокаута ответа JSON не обновляются все мои привязки ... как будто наблюдаемый/ отображения пропали

Если я добавлю дополнительные ko.applyBindings (viewModel);в success все работает ... однако затем возникают проблемы с несколькими привязками, и я уверен, что это не правильное решение.

Это HTML / Template / Bindings

<!-- Start Form -->
<form action="@Url.Action("Edit")" data-bind="submit: save">
<div id="editListing" data-bind="template: 'editListingTemplate'"></div>
<div id="saveListing" class="end-actions">
    <button type="submit">Save Listings</button>
</div>
</form>
<!-- End Form -->

<!-- Templates -->
<script type="text/html" id="editListingTemplate">
        <div class="warning message error" data-bind="visible: Response.HasWarning">
            <span>Correct the Following to Save</span>
            <ul>
                {{each(i, warning) Response.BusinessWarnings}}
                    <li data-bind="text: Message"></li>
                {{/each}}
            </ul>
        </div>

        <fieldset>
            <legend>Key Information</legend>
            <div class="editor-label">
                <label>Project Name</label>
            </div>
            <div class="editor-field">
                <input data-bind="value: Project_Name" class="title" />
            </div>            
        </fieldset>        
</script>
<!-- End templates -->

А это Knockout / Script

<script type="text/javascript">
        @{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model)); }

        var initialData = @jsonData;
        var viewModel = ko.mapping.fromJS(initialData);


        viewModel.save = function () 
        {
            this.Response = null;
            var data = ko.toJSON(this);
            $.ajax({
                url: '@Url.Action("Edit")',
                contentType: 'application/json',
                type: "POST",
                data: data,
                dataType: 'json',
                success: function (result) {
                ko.mapping.updateFromJS(viewModel, result);
            }
        });
    }

    $(function() {                        
        ko.applyBindings(viewModel);            
    });
</script>

И это ответ JSON, возвращенный из успешного запроса, включая сообщения проверки.

{
    "Id": 440,
    "Project_Name": "", 
    "Response": {
        "HasWarning": true,
        "BusinessWarnings": [
            {
                "ExceptionType": 2,
                "Message": "Project is invalid."
            }, {
                "ExceptionType": 1,
                "Message": "Project_Name may not be null"
            }
        ]
    }   
}

UPDATE

Fiddler Demo Это урезанный живой пример того, что я испытываю.У меня обновление Project_Name с возвращенным JSON, но объект и свойства viewModel.Response не обновляются через их привязки данных.Конкретно Response.HasWarning ().

Я вернулся на ko.mapping.updateFromJS, потому что в моем контроллере я специально возвращаю Json (viewModel).

Очистил мой исходный код / ​​вопросчтобы соответствовать демо.

Ответы [ 2 ]

6 голосов
/ 04 января 2011

Я думаю, что Ответ зарезервирован, когда я изменяю «Ответ» на «респ», все прошло нормально. Смотри http://jsfiddle.net/BBzVm/

4 голосов
/ 25 декабря 2010

Разве вы не должны использовать ko.mapping.updateFromJSON в вашем событии успеха? Глава Работа со строками JSON на сайте Knockout Mapping гласит:

Если ваш вызов Ajax возвращает строку JSON (и не десериализует ее в объект JavaScript), вы можете использовать функции ko.mapping.fromJSON и ko.mapping.updateFromJSON для создания и обновления модели представления.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...