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

Question

我有一个使用 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] 之类的索引号，这是一种硬编码的方法，所以我不希望这样。我应该怎么做才能动态绑定数据，即没有在 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 进行测试。