0

私はknockout.jsマッピングプラグインを使用して取得したカテゴリモデルを持っています。以下を参照してください

var categoryViewModel = ko.mapping.fromJS（data）;

現在、このcategoriesViewModelには次のようなデータがあります

[0]{id=1,name="adventure",description="abc"}

[1]{id=2,name="urban",description="def"}

[2]{id=3,name="romantic",description="ghi"}

次のhtmlマークアップでデータをバインドしたい

 <section class="categories">

                <ul class="categories-list">
                    <li class="urban"><a  href="javascript:;"><span>urban living</span></a></li>
                    <li class="adventure"><a href="javascript:;"><span>adventure</span></a></li>
                    <li class="romantic"><a href="javascript:;"><span>romantic</span></a></li>
                </ul>
                    <div class="descr">
                        <h3 data-bind="text: name"></h3>
                        <p data-bind="text: Description"></p>
                    </div>
</section>

私が欲しいのは、任意のタグにマウスオーバーすると、関連する説明がpタグに表示され、名前がタグに表示されることです。

を使用してJavaScriptでデータをバインドできます

ko.applyBindings(categoriesViewModel()[0], $('.categories .descr p').get(0));

しかし、ここでは[0]のようなインデックス番号を使用しています。これはハードコードされたアプローチの一種であるため、このようにはしたくありません。カテゴリViewModel（）でインデックスを指定せずにデータを動的にバインドするにはどうすればよいですか？

4

2 に答える 2

0

あなたがする必要があるのは、ビューモデルに「currentItem」または同様のものを追加してから、descr divをそれにバインドすることです（withを使用して）。次に、カテゴリ上でマウスオーバーを処理してcurrentItemを更新すると、すべてが自動的に更新されます。

また、カテゴリにforeachバインディングを使用してみませんか？

これが役立つかどうかを確認してください：http：//jsfiddle.net/QaYGz/1/

于 2012-08-10T14:02:17.880 に答える
0

これは動作します

<section class="categories">
  <ul class="categories-list" data-bind="foreach: categories">
    <li class="urban"><a href="javascript:;"><span data-bind='text: name, event: { mouseover: function(data, event) { $root.updateDescription($data) }, mouseout: function(data, event) { $root.clearDescription() } }'></span></a></li>                    
  </ul>
  <div class="descr">
    <h3 id="idName" data-bind="text: name"></h3>
    <p id="idDescription" data-bind="text: Description"></p>
  </div>
</section>

var json = {"categories":[{"id":"1","name":"adventure","description":"abc"},
{"id":"2","name":"urban","description":"def"},
{"id":"3","name":"romantic","description":"ghi"}]};

var model = ko.mapping.fromJS(json);

model.updateDescription = function(val) {    
    $("#idName").text(val.name());
    $("#idDescription").text(val.description());
}

model.clearDescription = function() {
    $("#idName").text('');
    $("#idDescription").text('');
}

ko.applyBindings(model);

テストについては、このフィドルも参照してください。

于 2012-08-10T14:27:06.603 に答える