淘汰赛js自定义绑定

Question

我正在使用 Knockout js 自定义绑定在 div 中绑定一些新的 div 元素，使用类并且我正在从数据库中获取数据，它仅适用于单个数据，如果数据不止一个，它会再次绑定在同一个 div 中，就像我下面的代码一样，

 //for single data it working 
<div data-bind="foreach:items">
  <ul data-role="listview">
  <li>
     <div databind="BindingImage({img:imageurl})" class="Image">
        <div id="img1"><img src=1.png /></div>
     </div>
  </li>
  </ul>
</div>

//for multiple data it not  working 
<div data-bind="foreach:items">
  <ul data-role="listview">
  <li>
    <div databind="BindingImage({img:imageurl})"class="Image">
        <div class="imageWrapper" id="img1"><img src=1.png /></div>
        <div clas="imageWrapper" id="img2"><img src=2.png /></div>
   </div>
        for multiple data its create databind="BindingImage div, but inside the div it does not bind anything, i need to bind image2 in this div but its getting bind on first  div itself,i need to bind first image inside the first BindingImage div and next  one in another BindingImage div where i am doing wrong. 
   <div databind="BindingImage({img:imageurl})"class="Image"></div>
  </li>
  </ul>
</div>


//custom binding//
ko.bindingHandlers.BindingImage = { 
    update: function(element, valueAccessor) {
        id+=1
        var className = element.className;
        imagewrapper= document.createElement('div');
        imagewrapper.className = "imageWrapper";
        imagewrapper.id = "img1"+id
        document.querySelector("." +className).appendChild(imagewrapper)
    }
};

Answer 1

有两个主要问题：

• 首先，id=+1。这将始终返回1。这与 i= parseInt(1) 相同。应该是id+=1
• 第二个document.querySelector("." +className).appendChild(imagewrapper)，这将始终附加到第一个容器。将其替换为element.append() 或document.querySelectorAll("." +className)[id-1].appendChild(imagewrapper)，考虑到id 将以1 开头。

您还缺少ul 的结束标签