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

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);
        });;
    }
});

1. 第一件事是在search函数中，当我调用query()时，它返回未定义。

2. 第二次当我使用以下行搜索并向results添加新项目时：

   results(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 方法使用了视图模型。它以这种方式工作。似乎我缺少一些drundal 接线*

Answer 1

您的变量声明部分的语法无效。改成：

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

如果您不对未定义变量使用 var 关键字，它将成为全局变量，并且在严格模式下会出错。

希望这能解决您的问题。

Answer 2

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

• 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 处理在您的视图模型中包含一些错误，因此您在全局窗口对象上创建了属性，而不是将它们声明为私有字段。所以你需要使用var而不是that：

  var results = ko.observableArray([]);
  var query = ko.observable('');
  

  在您的搜索方法中，您可以直接引用它们而无需任何“前缀”：

  return dataService.searchProduct(query()).then(function (data) {
     results([]);
     results(data);
  })
  

我给你发了pull request。