3

Off-top：标题很混乱，但我很快就找不到正确的词来描述我的情况，很抱歉。如果你能找到更好的东西，请推荐你的。我想我犯了一个简单的错误，因为我是 knockout.js 的新手，但我一整天都找不到它。

这是我所拥有的：

<select data-bind="
    value: SelectedPm,
    options: PmList, 
    optionsText: 'Name'"></select>
<b>Selected PM:</b> <span data-bind="text: SelectedPm().Name"></span>

JavaScript：

function PmModel(data) {
    this.Name = data.Name;
    this.Company = data.Company;
    this.Division = data.Division;
    this.EmpNo = data.EmpNo;

}

function ViewModel() {
    // Data
    var self = this;

    self.PmList = ko.observableArray([]);
    self.SelectedPm = ko.observable();

    // Operations
    ko.computed(function () {
        $.getJSON("/CumulativeReport/GetPmList", function (allData) {
            var mappedTasks = $.map(allData, function (item) { return new PmModel(item); });
            self.PmList(mappedTasks);
        });
    });
}

ko.applyBindings(new ViewModel());

在这种情况下，我在控制台中收到下一个错误：未捕获的错误：无法解析绑定。消息：TypeError：无法读取未定义的属性“名称”；绑定值：文本：SelectedPm().Name

但是当我不使用getJSON和使用一些模拟数组时它工作正常

    function PmModel(data) {
        this.Name = data.Name;
        this.Company = data.Company;
        this.Division = data.Division;
        this.EmpNo = data.EmpNo;

    }

    function ViewModel() {
    // Data
    var self = this;

    self.PmList = ko.observableArray([]);
    self.SelectedPm = ko.observable();

    // Operations
    ko.computed(function () {
        self.PmList([{Name:'aaaa'}, {Name:'bbbb'}]);    
    });
}

ko.applyBindings(new ViewModel());

或者如果我将使用 js 字符串对象作为 optionsValue

<select data-bind="
    value: SelectedPm,
    options: PmList, 
    optionsText: 'Name',
    optionsValue: 'Id'"></select>
<b>Selected PM:</b> <span data-bind="text: SelectedPm"></span>

JavaScript

function PmModel(data) {
    var self = this;
    this.Name = ko.observable(data.Name);
    this.Company = ko.observable(data.Company);
    this.Division = ko.observable(data.Division);
    this.EmpNo = ko.observable(data.EmpNo);
    this.Id = ko.computed(function () { return self.Company() + "-" + self.Division() + "-" + self.EmpNo(); });
}

function ViewModel() {
    // Data
    var self = this;

    self.PmList = ko.observableArray([]);
    self.SelectedPm = ko.observable();

    // Operations
    ko.computed(function () {
        $.getJSON("/CumulativeReport/GetPmList", function (allData) {
            var mappedTasks = $.map(allData, function (item) { return new PmModel(item); });
            self.PmList(mappedTasks);
        });
    });
}

ko.applyBindings(new ViewModel());

有人可以指出我做错了什么吗？提前致谢。

UPD1

我找到了让它工作的方法。看起来不是很好，但至少它有效

<select data-bind="
    value: SelectedPm,
    options: PmList, 
    optionsText: 'Name'"></select>
<!-- ko if: SelectedPm -->
<b>Selected PM:</b> <span data-bind="text: SelectedPm().Name"></span>
<!--/ko-->

我的猜测是，当触发 ajax 调用时，剔除触发了PmList( SelectedPm) 的依赖项并尝试在 UI 中重新呈现依赖项值，但请求处理时间过长且新值未及时传递SelectedPm。它看起来不合法，首先是因为版本optionsValue运行良好。但我没有任何其他想法如何解释它，所以这只是我的猜测，如果有人对此有更清晰的认识或答案，请分享它。

4

1 回答 1

2

好吧，问题是当你将视图模型绑定到页面时，SelectedPm 只是一个空的 observable，所以调用SelectedPm().Name会爆炸，因为没有 name 属性。我不知道这是否正确，但我只是用我想要的命名属性初始化变量：

self.SelectedPm = ko.observable({ Name: '' });

这样，第一次绑定到页面就没有问题了。

于 2013-05-14T14:03:46.960 回答