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/。

最简单的方法是定义一个代表所选照片的observable。然后单击绑定只需要通过调用它来设置observable：viewModel.selectedPhoto（$ data）。

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

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

1 个答案: