0

ノックアウトバインディングを使用してリンクのリストを作成しています。

Javascriptとビューモデルは次のようになります。

$(function () {
   var adminViewModel = function()
   {
       var self = this;
       self.leftItems = ko.observable([ { Name: "Item1", Id: 0 }]);
       self.getChildren = function (id, list) {
           var url ="@Url.Content("~/api/Test/GetChildren/")" + id;
           $.getJSON(url, function (data) {
              list(data);
           });
        };
    }
    var Admin3App = window.Admin3App = window.Admin3App || {};

    Admin3App.viewModel = new adminViewModel();
    ko.applyBindings(Admin3App.viewModel);

    function getLeftChildren(id)
    {
        Admin3App.viewModel.getChildren(id, Admin3App.viewModel.leftItems);
    }
    getLeftChildren(0);

}

（編集：の初期化にko.observableIDがありませんでした（これはエラーを引き起こしませんでしたが、追加しました）

これがどのように機能するかは、ビューモデルが親（id 0）を持たない一連のアイテムをロードすることです。簡単にするために、左のバージョンのみを含めました。ただし、ページには左右に項目のリストがあるので、それぞれに機能があります。

左側のアイテムは、モデルの左側のアイテムを表示するために入力され、以下のように表示されます。ただし、各アイテムはリンクであり、JavaScriptでクリックすると、親IDに基づいてアイテムが更新されます。（エクスプローラーでフォルダービューアーを参照するのとよく似ています）。

しかし、URLを構築するためにノックアウトでバインディングを宣言する方法を理解できません。私はこれがおそらく途方もなく簡単であることを知っています、そして私はそれを見逃しているだけです。

これが私が特に試みたhtmlです

<div class="leftView">
    <div data-bind="foreach: leftItems">
        <a data-bind="text: Name, attr : { href:'javascript:getLeftChildren(' + Id + ')' }"></a><br />
    </div>
</div>

（編集：一重引用符を逃しましたが、とにかく同じエラーが発生しました）しかし、バインディングエラーが発生し続けます

4

1 に答える 1

2

いくつかのこと：

1）leftItemsは理想的にはobservableArrayである必要があります

2）leftItemsにプッシュする最初のオブジェクトにはIdプロパティがありません

これは、いくつかのことを修正し、データの初期セットをロードしてから、別のデータをロードするために再度呼び出すことを示すJSfiddleです。また、外部のJavaScript呼び出しをviewModel内に移動し、クリックハンドラーを使用してデータをパスリフレッシュするように切り替えました（クリックバインディングは最初のパラメーターとしてデータアイテムをイベントハンドラーに自動的に送信するため、 URLを作成するために必要なID）。

http://jsfiddle.net/jearles/xTHFg/

于 2012-04-14T12:21:57.307 に答える