javascript - 如何停止 KnockOut.js 中的多重绑定(bind)

Question

我有一个像这样的 View 模型:

function ImageViewModel() 
{    
    var self = this;

    self.totalRecordCount = ko.observable();  

    self.currentRecordCount = ko.observable();

    self.images = ko.observableArray();
     // fetching all available images
    getAvailableImages(self, imageGalleryId, 1);//1 is page number for paging
}

我的html如下:

<小时/>

<div id="available Images" class="available-images" data-bind="foreach:images">
<div c`enter code here`lass="available-image">
<div class="col-sm-4 thumbnail">
<asp:CheckBox ID="cbxImage" runat="server" CssClass="checkbox" />
<img alt="" data-bind="attr: { 'src': ImagePath, id: 'img_' + ImageId, 'data-id': ImageId }"
style="border: none;" />
</div>
</div>
</div>

<小时/>

我在页面底部有java脚本:

  $('.galleryfooter').click(function () {
            $(this).attr('data-target', '#imageModal');
            $(this).attr('data-toggle', 'modal');
            ko.applyBindings(new ImageViewModel(), document.getElementById("imageGallery"));
        });

当我第一次单击时，图像已正确绑定(bind)，但当我再次单击该按钮时，图像会成倍增加。这意味着如果我在数据库中有 5 个图像，它会显示 25 个图像。那么我该怎么办？

Answer 1

停止使用 jQuery 处理事件。 knockout 对此有约束力。您与 Knockout 达成的​​协议(protocol)是，它控制 DOM，而您只操作 View 模型。

请参阅click binding和 attr binding 。另外，如果您还没有浏览the Knockout tutorial ，我强烈推荐它。它将帮助您摆脱 DOM。