2

ko.mapping.fromJS（Model）を使用してASP.NETMVCviewModelをKnockoutJSにロードしました。

私のviewModelは次のようになります。

public IEnumerable<FunkyThing>funkyThings;
public FunkyThing selectedFunkyThing;

次に、HTMLビューに次のようなテーブルを作成しました。

<tbody data-bind="foreach: funkyThings">
    <tr>
        <td data-bind="text:name"></td>  
        <td data-bind="text:funkiness"></td>  
        <td><a href='#' title="Select Funky Thing" data-bind="click: $root.selectFunkyThing"></a>
       </td>
    </tr>
</tbody>

そして、すべてがこのテーブルで良いです。ファンキーなものを選択するリンクをクリックすると、selectFunkyThing関数が呼び出されます。

    model.selectFunkyThing= function (funkyThing) {
        window.location = '@Url.Action(MVC.FunkyThingController.Index())' + "?funkyThingID=" + funkyThing.funkyThingID();

    };

これにより、ページが更新されます。MVCビューモデルが再ロードされ、selectedFunkyThingに選択されたFunkyThingが入力され、ノックアウトビューモデルがMVCビューモデルから再度読み取られます。ここまでは順調ですね。

次に、選択したエントリを強調表示するようにテーブルを更新したいと思いました。そこで、tr行を次のように更新しました。

<tr data-bind="css:{'selected': $root.isSelected()}">

新しいノックアウト関数を作成しました。

 model.isSelected = function (funkyThing) {
            return funkyThing.funkyThingID== model.selectedFunkyThing.funkyThingID;

        };

しかし...それは機能していません。Chromeは、FunkyThingパラメーターが未定義であることを示すjavascript例外をスローします。技術的には、MVC viewModelを変更して、配列内の各FunkyThingにisSelectedを実際に設定することで解決できると思います。しかし、私はノックアウトからこれを行うことから離れなければならないと思いますか？

4

2 に答える 2

2

あなたは近かった！ko.utils.unwrapObservablefunkyThingIDは単なるプロパティではなく、観察可能なものであると確信しているため、この呼び出しを追加しました。これは、selectFunkyThing関数で自分で行いました。それらを実行することもできます。ただし、アンラップの冗長性は気に入っています。

model.isSelected = function (funkyThing) {
  var thisId = ko.utils.unwrapObservable(model.selectedFunkyThing.funkyThingID);
  return ko.utils.unwrapObservable(funkyThing.funkyThingID) == thisId;
};

次に、ドキュメントで、koがバインディングを解析するときに実際にこの関数を実行する必要があります

<tr data-bind="css:{'selected': $root.isSelected($data)}">
于 2013-03-15T21:12:17.347 に答える
1

これらのプロパティは両方とも監視可能ではないので、関数として参照する必要がありますか？また、関数を計算されたオブザーバブルにする必要があると思います。

model.isSelected = ko.computed(function (funkyThing) {
    return funkyThing().funkyThingID() == model.selectedFunkyThing().funkyThingID();
});
于 2013-03-15T18:11:25.270 に答える