Durandal:无法解析绑定

Question

我觉得问这个问题很愚蠢，我一直在关注John教程，并且有视图绑定问题。在应用程序的结构方面，我试图采取与他相同的方法。

我的回购/数据服务：

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控制台的转储：

“无法解析绑定.↵消息:参考错误：…me未定义；↵绑定值: text: userName“、”视图/移位“、对象0：”无法解析绑定。↵消息: userName未定义；userName绑定值:文本: 1：“视图/移位”2:对象moduleId：“视图模型/移位”激活:函数激活(){ shift : Object ko_proto：function (initialValue) { _latestValue: Array2 0: shift employeeId: Function可观(){ shiftId:函数可观测(){开始:可观察函数(){ userName:可观察函数(){ E19proto：对象1:移位长度:2 proto：数组

我做错了什么？我试图改变将dto对象的属性映射到类似于Papas方法的可观测值的方式，但结果是相同的。

任何帮助都将不胜感激。

更新:在我看来，这样做很有效！：

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

所以很明显，我对表的构造不太聪明，有人能解释我做错了什么吗？

Answer 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>