将代码从jquery转换为prototype或dojo

时间:2009-06-25 04:17:06

标签: javascript jquery dojo prototypejs

如果你不得不这样做......

function addRemoveItemNS() {
  var $newLi = $('<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>');
$('#list9 li.special')
  .find('button.addone')
 .unbind('click.addit')
 .bind('click.addit', function() {
   $(this).parent().after($newLi);
   addRemoveItemNS();
  })
  .end()
  .find('button.removeme')
  .unbind('click.removeit')
  .bind('click.removeit', function() {
 $(this).parent().remove();
  });
}
$(document).ready(function() {
  addRemoveItemNS();
});

...使用原型或dojo而不是jquery,你会怎么做?

2 个答案:

答案 0 :(得分:4)

以下是使用Dojo中继代码(或Dojo 1.4发布后)的方法。中继代码添加了对end()的支持,以更好地匹配原始代码。您可以通过将dojo.query(inserted)保存为变量并在两个单独的语句中调用.query()来获得相同的效果来解决这个问题,然后您可以使用Dojo 1.3。

function addRemoveItemNS() {
  var html = '<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>';
  var inserted = dojo.place(html, "list9");
  dojo.query(inserted)
    .query('button.addone')
      .onclick(function(evt){
        addRemoveItemNS()
      })
    .end()
    .query('button.removeme')
      .onclick(function(evt){
        //Use normal DOM API for parentNode to get reference.
        dojo.destroy(evt.target.parentNode);
      });
}

dojo.addOnLoad(function(){
  //First create #list9 node? Missing from original code.
  dojo.place('<ul id="list9"></ul>', dojo.body());
  addRemoveItemNS();
});

关于代码的一些注释:

  • 通过使用HTML字符串,然后dojo.placing它,就没有必要调用“unbind”。
  • Dojo不支持绑定到DOM节点上事件的自定义名称,只支持标准DOM事件名称,如onclick,onfocus等。
  • Dojo默认情况下不会在点击处理程序中创建单击“this”引用的DOM节点,因为Dojo支持“this”参数作为其onclick函数的一部分。这就是为什么evt.target用于删除按钮单击操作。

答案 1 :(得分:0)

好吧,因为您的代码中没有事件......或者AJAX。

只是一个用词不当的愚蠢要求。