在单个视图中使用多个模板和绑定

Question

我正在使用 KnockoutJS 来显示图像列表。假设我使用模板 X 来显示此列表，并且我定义了另一个模板 Y 以在所选图像的单独对话框中显示详细信息。我在将所选图像与此详细模板 Y 绑定时遇到问题。下面是我实际视图的模拟/部分代码

视图模型：

var viewModel {
    photos:ko.observableArray(//list of photos),
    showDetails:function(item){
        //show the details of the selected image in dialog
    }
 };

绑定应用为

 ko.applyBindings(viewModel);

这就是 X 的定义方式

<script id="X" type="text/html">
  {{each(i,item) photos()}}
      <a href="javascript:;" data-bind="click:function(){showDetails(item);}">show Image</a>
  {{/each}}
</script>

这是应用模板的方式

 <div class="list" data-bind="template: {name:'X'}"></div>

这是模板 Y 的模型

 <script id="Y" type="text/html">
   <img src="{url}" />
 </script>

我应该如何定义 showDetails 函数以将绑定应用到模板 Y？

Answer 1

这是一个有效的示例：http://jsfiddle.net/rniemeyer/MCQgY/。

最简单的方法是定义一个表示所选照片的​​可观察对象。然后点击绑定只需要通过调用它来设置可观察对象：viewModel.selectedPhoto($data)。

希望这会有所帮助。如果您有其他问题/问题，请告诉我。