Question

编辑： - 我已在github上传了项目的完整代码。

以下是我的观点模型：

define(["ko",
        "service/dataService",
    'service/logger',
        'durandal/system'],
function (ko, svc, logger, system) {
    var that = this,
    results = ko.observableArray(),
    query = ko.observable();

    var SearchProduct = {
        activate: activate,
        title: 'Search',
        search: search,
        results: results,
        query: query
    };

    return SearchProduct;

    function activate() {}

    function search() {
        svc.searchProduct(query()).then(function (data) {
            results([]);results(data);
        }).fail(function (jqXHR, textStatus) {
            var msg = 'Error searching item: ' + textStatus;
            logger.logError(msg, jqXHR, system.getModuleId(svc), true);
        });;
    }
});

首先，在search函数中，当我调用query()时，它会返回undefined。
当我使用以下行搜索并向results添加新项目时<秒>

results（data）; // data是10个项目的数组

更改未反映在以下html模板中：

<form class="navbar-form pull-right" role="search" data-bind="submit: search">
    <div class="form-group">
            <input type="text" class="form-control" placeholder="Search" 
                    data-bind='text: query, valueUpdate: "afterkeydown"'>
    </div>
    <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>&nbsp;Search
    </button>
</form>

<section data-bind="foreach: results">
    <div class="row">
        <div class="col-md-4 pull-left">
            <label data-bind="text: name"></label><br/>
            <label data-bind="text:category"></label>
        </div>
        <div class="col-md-7 pull-right">
            <label data-bind="text:shortDescription"></label>
        </div>
    </div>
</section>

section使用foreach: results绑定。在应用更改后（添加到observable的项目列表）并在从其他页面导航后进入页面时，以下行正确反映了计数：

<span data-bind="text: results().length"></span>&nbsp;items found

我做错了什么？

编辑： - 谜题的一部分已解决

如果我使用results()而不是results，则列表绑定工作!!!

<section data-bind="foreach: results()">

编辑3： - * 创建了简单的cshtml视图，并使用ko.applyBindings方法使用了viewmodel。它以这种方式工作。似乎我错过了一些drundal布线 *

Answer 1

您当前的代码存在多个问题：

Durandal 2.0.0现在通过requrejs使用Knockout。（文档在各处都已更新。请参阅samples作为参考），因此无需明确引用Knockout，因为它可能导致像您这样的奇怪错误。 Durandal使用名为knockoutout的ko。因此，请更改main.js：
```
requirejs.config({
    paths: {
     //...      
     'knockout': "../Scripts/knockout-2.3.0",  
});
```
然后删除该行：define('knockout', [], function () { return ko; });
您的this处理在您的viewmodel中包含一些错误，因此您已在全局窗口对象上创建了属性，而不是将它们声明为私有字段。因此，您需要使用that代替var：
```
var results = ko.observableArray([]);
var query = ko.observable('');
```
在您的搜索方法中，您可以在没有任何“前缀”的情况下引用它们：
```
return dataService.searchProduct(query()).then(function (data) {
   results([]);
   results(data);
})
```

我已经给你发了pull request。

Answer 2

您的变量声明部分语法无效。将其更改为：

var that = this, // coma needed
results = ko.observableArray(), // coma needed
query = ko.observable();

如果你没有将var关键字用于未定义的变量，那么它将变为全局且严格模式，这将是一个错误。

希望这可以解决你的问题。

Durandal App - 不反映视图模型的变化

2 个答案: