1. 通过对数组的操作实现对文章的增加、删除。

2. 通过控制每项的显示与隐藏实现页面只显示一个可编辑的文章。

涉及知识点: 数据绑定 绑定数据编程 数组操作 布局

1. 页面添加9/3布局，开启“元素模式”，分别在布局中添加下图中内容（点击可查看大图）：

2. 在9的布局上进行数组绑定，并对数组进行初始化，如下图：

{"wz":[{"wenzhang":1,"neirong":"请输入文章内容","biaoti":"请输入文章标题"}],"chongtu":1,"tanchuang":1}

在9布局中的3布局上进行CSS类绑定

在“文章标题”上进行文本内容绑定

在“编辑”上进行绑定数据编程

if(_vm.chongtu()==1)
{_vm.tanchuang(0);}
else{
_ko.dataFor(_ctx.self[0]).wenzhang(1);
_vm.chongtu(1);
_ko.dataFor(_ctx.self[0]).jinyong(false);
}

3. 在页面右侧3布局中的“新增”上进行绑定数据编程

if(_vm.chongtu()!=1)
{
_vm.chongtu(1);

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "push",
    "wz", {
       "wenzhang":1,
       "neirong":"请输入文章内容",
       "biaoti":"请输入文章标题",
      "jinyong":true
    }
  ]
}]);
}
else{
_vm.tanchuang(0);
}

在“确定”按钮上进行绑定数据编程

_vm.tanchuang(1);

在“确定”按钮的父元素div上进行CSS类绑定，并设置其布局如下图：

4. 页面添加一个div，称之为div1，对其进行数组绑定，如下图：

在div1中添加一个div，称之为div2，对其进行CSS类绑定，如下图：

5. 在div2中添加内容，“summernote 1”是富文本元素，如下图：

在单行文本上进行文本输入值绑定，如下图：

在富文本上进行属性绑定，如下图：

绑定参数：{"id":"summernote_"+$index(),"data--snoteinit":neirong}

在“保存”按钮上进行绑定数据编程，如下图：

_ko.dataFor(_ctx.self[0]).wenzhang(0);
_vm.chongtu(0);
_vm.tanchuang(1);

在“取消”按钮上进行绑定数据编程，如下图：

_ko.dataFor(_ctx.self[0]).biaoti("请输入文章标题");
var ccc=_ko.dataFor(_ctx.self[0]).neirong();
_ko.dataFor(_ctx.self[0]).neirong("");
_ko.dataFor(_ctx.self[0]).neirong(ccc);

在“删除”按钮上进行属性绑定和绑定数据编程，如下图：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "remove",
    "wz",
    _ko.contextFor(_ctx.self[0]).$index()
  ]
}]);
_vm.chongtu(0);
_vm.tanchuang(1);