Question

我有一个cateogory模型，我使用knockout.js映射插件，见下文

var categoriesViewModel = 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]那样的索引号，这是一种硬编码的approch所以我不希望它像这样。我该怎么做才能动态绑定数据，即不在categoriesViewModel（）中指定索引？

Answer 1

听起来你需要做的是添加一个“currentItem”或类似于你的视图模型，然后将你的descr div绑定到它（使用with）。然后，您可以将鼠标悬停在类别上以更新currentItem，将自动更新所有内容。

另外，为什么不为你的类别使用foreach绑定？

看看这是否有帮助：http://jsfiddle.net/QaYGz/1/

Answer 2

这有效

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

另见this fiddle进行测试。

使用带有html的knockout.js绑定数组数据

2 个答案: