Чувствуя себя глупо из-за того, что задал этот вопрос, я следил за учебным пособием 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>
Итак, очевидно, я был не слишком умен с конструкцией таблицы, может ли кто-нибудь объяснить мне, что я делал неправильно?