Question

对于提出这个问题感到很愚蠢，我一直在关注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;  
});

我的viewmodel：

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

[“无法解析bindings.↵Message：ReferenceError：...我没有定义;↵Bindings值：text：userName”，“views / shifting”，Object] 0：“无法解析bindings.↵Message：ReferenceError：未定义userName;↵Bindings值：text：userName” 1：“观点/转变” 2：对象 moduleId ：“viewmodels / shifting” activate：function activate（）{ 轮班：对象[0] ko_proto ：function（initialValue）{ _latestValue：数组[2] 0：转移 employeeId：function observable（）{ end：function observable（）{ shiftId：function observable（）{ start：function observable（）{ userName：function observable（）{ proto ：对象 1：转移长度：2 proto ：数组[0]

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

任何帮助都将不胜感激。

更新：在我的视图中执行此操作！：

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

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

Answer 1

你的绑定只是你的HTML搞砸了。

您已{strong>关闭了tbody 之前的tr。因此，KO将重复空tbody并尝试在主视图模型上绑定userName，而不是在shifts项目上绑定。{/ p>

所以你只需要修复你的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>

Durandal：无法解析绑定

1 个答案: