Как сопоставить массив, поступающий от объекта сервера, используя плагин Knockout Mapping в шаблонах? - PullRequest
Новая
       13

Как сопоставить массив, поступающий от объекта сервера, используя плагин Knockout Mapping в шаблонах?

0 голосов
/ 13 декабря 2011

У меня проблемы с пониманием того, как работают ko.mapping.fromJS и ko.mapping.toJS.Здесь объяснение моей проблемы упрощено: у меня есть объект Risk Array, поступающий с сервера, этот массив Risk имеет массив Places.

По какой-то странной причине после вызова ko.mapping.FromJS моего дочернего массива Placesочищается или скрывается, поэтому мой шаблон не может получить доступ к его содержимому ... Я обнаружил, что с помощью ko.mapping.ToJS я могу получить доступ к содержимому Places, но при этом он не обновляет мой шаблон после добавленияItem!

Я пытаюсь построить очень простую сетку, где я могу добавить места для первого риска в массиве для упрощения: 

    var FromServer = {"Risk":[{"SourceKey":0,"Places":{"Place":[{"SourceKey":1}]}}]}

var viewModel = 
    {
        places : ko.mapping.fromJS(FromServer.Risk[0].Places.Place),
        addPlace : function()
        {
            alert('Entering add place, places count:' + this.places.length);
            this.places.push({SourceKey:"New SK"});
        }
    }
//If I leave this line it will update list but not refresh template
//If I comment it out it will show my Places array as empty!!!
viewModel = ko.mapping.toJS(viewModel)

ko.applyBindings(viewModel);

Вот мой пример HTML-кода для моегоgrid: 

 <p>You have asked for <span data-bind="text: places.length">&nbsp;</span> place(s)</p>
    <table data-bind="visible: places.length > 0">
        <thead>
            <tr>
                <th>SourceKey</th>
            </tr>
        </thead>
        <tbody data-bind='template: { name: "placeRowTemplate", foreach: places}'></tbody>
    </table>

<button data-bind="click: addPlace">Add Place</button>

<script type="text/html" id="placeRowTemplate">
    <tr>
        <td><input class="required" data-bind="value: $data.SourceKey, uniqueName: true"/></td>
    </tr>
</script>

Вот мой jsFiddle: Образец jsFiddle

Мой вопрос: почему я должен развернуть мою viewModel с помощью ko.mapping.ToJS, чтобы яможно манипулировать моим дочерним массивом? и как мне обновить мой шаблон в этом сценарии?

Пожалуйста, помогите!

1 Ответ

3 голосов
/ 13 декабря 2011

У вас было несколько проблем с вашим кодом. Новый JSFiddle здесь:

http://jsfiddle.net/ueGAA/4/

  1. Вам необходимо было создать наблюдаемый массив для массива мест, иначе нокаут не будет знать, когда он был обновлен. Вызов метода

    ko.observableArray (arrayVar)

  2. Вы не хотите звонить в JS на вашей модели представления. Это разворачивает все наблюдаемые и делает Нокаут не способным обновлять ваши привязки

  3. При обращении к наблюдаемому массиву вам нужно использовать парены: т.е. viewModel.places (). длина.

  4. В вашем объекте FromServer ваш объект Place содержал массив с объектом {"SourceKey": 1} внутри него. Я предполагал, что вы хотите, чтобы у объекта place было простое свойство SourceKey

...