Наблюдаемый массив Knockout.js не обновляется с сервера при использовании подключаемого модуля отображения

Question

У меня небольшая проблема с Knockout.js и его плагином для отображения.По сути, я хочу начать без данных, а затем при загрузке страницы сделать запрос Ajax для загрузки информации.Я знаю, что Ajax-запрос работает должным образом, потому что я записываю на консоль данные по мере их возврата.

    var projectId = @Model.Project.Id;
    var stories;
    viewModel = ko.mapping.fromJS(stories);       

    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            stories = data.stories;
            ko.mapping.fromJS(stories, viewModel);
            console.log(stories);
        }
    });

Консоль правильно регистрирует данные.поэтому я знаю, что запрос Ajax работает правильно.

l

Просмотр разметки:

   <section id="project-stories"  data-bind="foreach: stories">

            <div class="project-story-container drop-shadow">

                <div class="story-summary">
                    Story Summary
                </div>
                <div class="story" data-bind="attr:{'data-id': Id}">
                    As a <span  class="actor" data-bind="text: Actor"> </span> I want to <span  class="objective" data-bind="text: Objective"> </span>, so that  <span  class="justification" data-bind="text: Justification"></span>.
                </div>
                <div class="story-controls">
                    <a href="#">Edit</a>
                </div>
            </div>
        </section>

Я даже пытался позвонить:

   var projectId = @Model.Project.Id;
    var stories;
    viewModel = ko.mapping.fromJS(stories);
     ko.applyBindings(viewModel);

    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            stories = data.stories;
            ko.mapping.fromJS(stories, viewModel);
            console.log(stories);
        }
    });

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

Кто-нибудь может увидеть, что я делаю не так?В конце концов я хочу, чтобы в модели представления было больше событий, что, как я знаю, станет еще одной проблемой.Но сейчас я даже не могу заставить привязки обновляться должным образом после завершения запроса Ajax.

Выход из учебника здесь: http://knockoutjs.com/documentation/plugins-mapping.html

-------------------- ОБНОВЛЕНИЕ --------------------------

Я смог ответить на мойсобственный вопрос, ссылаясь на это сообщение StackExhange:

Путаница с плагином сопоставления JS Knockout

var projectId = @Model.Project.Id;
    var viewModel ={};
    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            viewModel.stories = ko.mapping.fromJS(data.stories);
            ko.applyBindings(viewModel);
        }
    });

Проблема была в том, что мне нужна пустая модель представления, чтобы это работало.

Answer 1

@ Marek Karbarz Привет, я не верю, что вы должны передавать всю модель представления.Например, если у вас есть модель для страницы, модель имеет объект SearchCriteria и объект Results.Зачем вам возвращать объект Results, когда вам нужно только выполнить поиск?

-Edward

Answer 2

Проблема в том, как вы делаете отображение.Вы должны отображать не data.stories, а data сам ko.mapping.fromJS(data, viewModel);. Таким образом, объединение карт создаст наблюдаемый массив для историй, которые вы затем сможете использовать в своем шаблоне.

Если data содержит другие элементычто вы не хотите отображать, вы можете добавить их в массив игнорирования, чтобы отображались только истории.

Еще одна вещь - если вы начинаете без данных, вы получите эту ошибку при загрузке страницы, потому чтоKnockout попытается отобразить stories в вашей модели представления, когда такого свойства не существует.Определите вашу модель представления заранее, чтобы она содержала stories в качестве наблюдаемого массива.