Durandal：無法解析綁定

Question

感到愚蠢的問這個問題，我一直在遵循約翰帕帕斯SPA教程和我有查看綁定問題。 我試圖採取與他在應用程序結構方面一樣的方法。

我的回購/ DataService的：

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的控制檯轉儲：

["Unable to parse bindings.↵Message: ReferenceError:…me is not defined;↵Bindings value: text: userName", "views/shifts", Object] 0: "Unable to parse bindings.↵Message: ReferenceError: userName is not defined;↵Bindings value: text: userName" 1: "views/shifts" 2: Object moduleId: "viewmodels/shifts" activate: 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 proto: Array[0]

我在做什麼錯？我試圖改變將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>