データの動的な追加・削除

<dataset>に対してデータを動的に追加・削除すると、その<dataset>にバインドしているコンポーネント上の表示データが追加・削除されたように見えます。

メモリ上だけの動きなのでリロードすると当然元に戻ります。
結果を永続的に保存するにはサーバサイド経由でDBに保存します。

▼サンプルの楽しみ方：
* 追加・・・入力欄に何か入れて追加ボタンを押すと、右の<list>内にデータが追加されます。

• 削除・・・<list>内から削除したいデータをクリックして削除ボタンを押すと消えます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <dataset name="ds"/>
  <simplelayout spacing="5" axis="x"/>
  <edittext id="ed"/>
  <button>追加
    <attribute name="i" value="0"/>
    <handler name="onclick">
      var d = ed.getText();
      var e = new LzDataElement ("item",{'text':d,'value':i});
      ds.appendChild(e); 
      this.setAttribute('i',this.i+1);
    </handler>
  </button>
  <button>削除
    <handler name="onclick">
      var dp = ds.getPointer();
      var target = dp.xpathQuery("/item[@value='" + lst.value + "']");
      dp.setPointer(target);
      dp.deleteNode();
    </handler>
  </button>
  <list id="lst" width="130" height="82">
    <textlistitem datapath="ds:/item" 
                text="$path{'@text'}" value="$path{'@value'}"/>
  </list>
</canvas>