用户登录

在编辑文章资源用的表单上可以再显示一组复选框 .. 是一组标签,上面要默认勾选已经给文章打上的标签 .. 回到 PostController ... 找到 edit ..

在里面添加一个 _tags .. await Tag.all() ... 下面再添加一个 tags ... 用一下 _tags 的 toJSON ..

这个 tags 可以作为复选框的选项 .. 我们再把给文章打上的标签找出来 .. 然后根据已经贴上的标签,在这组 tags 的项目里面,动态添加一个 checked 属性 ... 这样做是为了让视图知道复选框选项的勾选状态 ..

await .. _post ,用一下 load ... 找出 tags ..

上面得到的这个 post 可以改成 _post ...

再添加一个 post ... 它的值用一下 _post 的 toJSON ..

下面可以再添加一个 postTagIds ... 它的值就是给文章打上的标签的 id 号 .. post.tags.map ... 当前项目叫 tag .. return 的是 tag.id .

然后再重新制造一下复选框选项 .. 添加一个 tagItems .. 用一下 tags 的 map .. 当前项目是 tag ... 判断一下 .. 看看 postTagIds 里面包不包含当前的 tag.id .. 如果包含的话,我们可以在 tag 里面添加一个 checked ,值是 true ..

下面再 return 这个 tag ..

再把这个 tagItems 再传递给视图去用一下 .. tags .. tagItems ..

视图

回到文章编辑视图 .. 可以用 radio--horizontal 组件添加一组复选框 .. 直接去复制一下 create 视图里面使用的这个组件 ... 粘贴到这个编辑视图上 ..

再到浏览器上去预览一下 ... 刷新一下页面 ..

出现了一个错误 .. 说 post 上面没有 toJSON 这个方法 ..

回到项目 .. 在 PostController 控制器的 edit 里面 .. 传递给视图的这个 post ,可以直接是个 post .. 因为上面我们已经使用了这个 toJSON 转换了一下文章模型数据 ..

回到浏览器 .. 再看一下 ..

现在,这个文章编辑表单上会显示一组标签复选框 ... 跟文章相关的标签项目已经默认被勾选上了 ...

编辑文章资源:复选框组件《 Node.js 应用:重构与改进 #1 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点