0

編集:- プロジェクトの完全なコードを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()、undefined が返されます。

  2. 2番目に、次の行で新しいアイテムを検索して追加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ます。変更が適用された後 (オブザーバブルに追加されたアイテムのリスト)、他のページから移動した後にページに移動すると、次の行にカウントが正しく反映されます。

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

私は何を間違っていますか？

編集:- パズルの一部が解決されました

results()の代わりに使用するとresults、リストとのバインディングが機能します!!!

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

EDIT 3:- *シンプルなcshtmlビューを作成し、ko.applyBindingsメソッドでビューモデルを使用しました。このように動作します。drundal配線の一部が欠けているようです*

4

2 に答える 2

1

現在のコードには複数の問題があります。

  • Durandal 2.0.0 は requrejs を介して Knockout を使用するようになりました。（ドキュメントはまだどこでも更新されています。参照としてサンプルを参照してください）したがって、Knockout を明示的に参照する必要はありません。これは、あなたのような奇妙なエラーにつながる可能性があるためです。そしてデュランダルは名前でコを使うknockoutout。だからあなたを変更してくださいmain.js：

    requirejs.config({
    paths: {
     //...      
     'knockout': "../Scripts/knockout-2.3.0",  
});

    そして次の行を削除します。define('knockout', [], function () { return ko; });

  • 処理にはビューモデルにいくつかのエラーが含まれてthisいるため、プライベート フィールドとして宣言する代わりに、グローバル ウィンドウ オブジェクトにプロパティを作成しました。したがって、代わりにthat次を使用する必要がありますvar。

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

    そして、検索方法では、「プレフィックス」なしでそれらを参照できます。

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

プル リクエストを送信しました。

于 2013-10-22T07:34:34.660 に答える
0

変数宣言セクションの構文が無効です。次のように変更します。

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

未定義の変数に var キーワードを使用しない場合、それはグローバルになり、厳密モードではエラーになります。

うまくいけば、それで問題が解決するはずです。

于 2013-10-17T14:24:28.900 に答える