ko.mapping with template foreach

http://stackoverflow.com/questions/10149239/knockoutjs-and-mapping-plugin-specific-logic-on-data-update-using-template-after

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<svg height="400" width="600"></svg>

JavaScript

function onDragDrop(dragHandler, dropHandler) {
        var drag = d3.behavior.drag();

    drag.on("drag", dragHandler)
    .on("dragend", dropHandler);
    return drag;
    }

      var d = [{ x: 20, y: 20 }];

        var g = d3.select("body").select("svg").data(d).append("g").attr("transform", function (d) { return        "translate(" + d.x + "," + d.y + ")"; })
         .call(onDragDrop(dragmove, dropHandler));

    g.append("rect")
    .attr("width", 40)
    .attr("height", 40)
    .attr("stroke", "red")
    .attr("fill","transparent")
    .attr("x", "20" )
    .attr("y", "20")

    g.append("text")
    .text("Any Text")
    .attr("x", "20" )
    .attr("y", "20")
    
    function dropHandler(d) {
        alert('dropped');
    }

  function dragmove(d) {
            d.x += d3.event.dx;
            d.y += d3.event.dy;
            d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
  }