Дюрандаль: невозможно разобрать привязки

Чувствуя себя глупо из-за того, что задал этот вопрос, я следил за учебным пособием John Papas SPA и у меня возникли проблемы с привязкой просмотра. Я попытался использовать тот же подход, что и он, в отношении структуры приложения.

Мой репо/сервис данных:

define(function (require) {
var http = require('durandal/http');
var model = require("viewmodels/model");

var getShifts = function (observableShifts) {

    observableShifts([]);

    return http.get("api/shift/").then(querySucceeded);

    function querySucceeded(data) {
        var shifts = [];
        data.forEach(function (item) {
            var s = new model.shift(item);
            shifts.push(s);
        });
        observableShifts(shifts);
    };
};

var shiftRepository = {
    getShifts : getShifts
};

return shiftRepository;

});

Моя модель:

define(function () {

var shift = function (dto) {
    this.start = ko.observable(dto.Start);
    this.end = ko.observable(dto.End);
    this.employeeId = ko.observable(dto.EmployeeId);
    this.shiftId = ko.observable(dto.WorkingShiftId);
    this.userName = ko.observable(dto.UserName);
    return this;
};

var model = {
    shift: shift
};
return model;  
});

моя модель просмотра:

define(function (require) {

var shiftRepository = require("repositories/shiftRepository");

var shifts = ko.observableArray();

var vm = {
    activate : activate,
    shifts: shifts,
    title: 'My shifts'
};
return vm;

function activate() {
    return shiftRepository.getShifts(shifts);
}

});

мой вид:

<div>
<h3 data-bind="text: title"></h3>
<span data-bind="text: shifts().length"></span><span> found</span>
<table border="1">
    <thead>
        <tr><td>Shifts</td></tr>
    </thead>
    <tbody data-bind="foreach: shifts"></tbody>
    <tr>
        <td data-bind="text: userName"></td>
    </tr>
</table>
</div>

Я вижу, что возвращаются два элемента, а также вижу ожидаемые свойства. Это дамп из консоли Chrome:

["Невозможно разобрать привязки.↵Сообщение: ReferenceError:…me не определено;↵Значение привязки: текст: имя пользователя", "просмотры/сдвиги", Объект] 0: "Невозможно разобрать привязки.↵Сообщение: ReferenceError: userName is не определено; ↵Bindings value: text: userName" 1: "views/shifts" 2: Object moduleId: "viewmodels/shifts" активировать: function enable() { shifts: Object[0] ko_proto: function (initialValue) { _latestValue: Array[2] 0: shift employeeId: function observable() { end: function observable() { shiftId: function observable() { start: function observable() { userName : function observable() { proto: Объект 1: длина сдвига: 2 proto: Массив[0]

Что я делаю неправильно? Я попытался изменить способ сопоставления свойств объектов dto с наблюдаемыми, похожими на подход Папаса, но с тем же результатом.

Любая помощь будет оценена по достоинству.

Обновление: на мой взгляд, это работает!:

<section data-bind="foreach: shifts">
    <article>
        <span data-bind="text: userName"></span>
    </article>
</section>

Итак, очевидно, я был не слишком умен с конструкцией таблицы, может ли кто-нибудь объяснить мне, что я делал неправильно?


person Casper    schedule 02.04.2013    source источник


Ответы (1)


Ваша привязка правильная, только ваш HTML испорчен.

Вы закрыли tbody перед tr. Таким образом, KO будет повторять пустой tbody и пытаться привязать userName к основной модели представления, а не к элементам shifts.

Итак, вам просто нужно исправить свой HTML, и он должен работать нормально:

<table border="1">
    <thead>
        <tr><td>Shifts</td></tr>
    </thead>
    <tbody data-bind="foreach: shifts">
        <tr>
            <td data-bind="text: userName"></td>
        </tr>
    </tbody>
</table>
person nemesv    schedule 02.04.2013