1

问这个问题感觉很愚蠢，我一直在关注 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：用户名是未定义；↵绑定值：文本：userName” 1：“views/shifts”2：对象 moduleId：“viewmodels/shifts”激活：function activate() { 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 : Object 1: shift length: 2 原型：数组[0]

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

任何帮助，将不胜感激。

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

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

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

4

1 回答 1

2

您的绑定是正确的，只是您的 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>
于 2013-04-02T09:26:53.143 回答