jQuery tmpl nested

Doesn't work in jsfiddle

HTML

<script type="text/javascript"
  src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
</script>
<div id="doo">test</div>
<div data-container-for="items"></div>
<script data-template-for="items" type="text/html">
<li>
   {{tmpl t }}
</li>
</script>
<script data-template-for="red-items" type="text/html">
   <span style="color:red">{{= title}}</span>
</script>
<script data-template-for="green-items" type="text/html">
   <span style="color:green">{{= title}}</span>
</script>

JavaScript

(function ($, undefined) {
    if ($ === undefined) {
        throw "Dependency: jQuery is not defined. Please check javascript imports.";
    }
    $.extend($.expr[':'],
    {
        // :template(name)
        template: function (current, index, metadata, elements) {
            var arg = metadata[3],
                d = $(current).data("template-for");
            if (d === undefined) {
                return false;
            }
            return arg ? arg === d : true;
        },
        // :container(name)
        container: function (current, index, metadata, elements) {
            var arg = metadata[3],
                d = $(current).data("container-for");
            if (d === undefined) {
                return false;
            }
            return arg ? arg === d : true;
        }
    });
} (jQuery));
$(document).ready(function() {
    $("#doo").live({
        click: doo
    });
    $.template("red", $(":template(red-items)").template());
    $.template("green", $(":template(green-items)").template());
});
var d = [];
d.push({ title: "one", t: "red" });
d.push({ title: "two", t: "green" });
function doo() {
    $(":template(items)").tmpl(d).appendTo(":container(items)");
}