Durandal：无法解析绑定答案

【问题标题】：Durandal: unable to parse bindingsDurandal：无法解析绑定
【发布时间】：2013-03-23 12:22:21
【问题描述】：

觉得问这个问题很愚蠢，我一直在关注 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：…我未定义；↵绑定值：文本：用户名”，“视图/班次”，对象] 0：“无法解析绑定。↵消息：ReferenceError：未定义用户名；↵绑定值：文本：用户名” 1：“视图/班次” 2：对象 moduleId：“视图模型/班次” 激活：函数激活（）{ 班次：对象[0] ko_proto：函数（初始值）{ _latestValue：数组[2] 0：移位员工ID：函数可观察（）{ 结束：函数可观察（）{ shiftId: 函数 observable() { 开始：函数可观察（）{ 用户名：函数可观察（）{ 原型：对象 1：移位长度：2 原型：数组[0]

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

任何帮助将不胜感激。

更新：在我看来这样做是有效的！：

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

显然我对表格结构不太聪明，谁能向我解释我做错了什么？

【问题讨论】：

标签： knockout.js durandal

【解决方案1】：

你的绑定是正确的，只是你的 HTML 搞砸了。

您已经在tr 之前关闭了tbody。所以 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>

【讨论】：