江苏龙网

  1. 首页 > 生活 > >

Vue实现3个层次的联动的难题

你好，我没有细看你的code，我对你的需求做的假设是，1. 选seller级别的checkbox时，下一级product全选；2. 取消seller级别checkbox，下一级product全取消；3. 分别选择下一级别product以至于全部选中时，上一级seller自动勾选；4. 分别取消下一级别product以至于全部取消时，上一级seller自动取消。请参照以下code linkPlunker当你使用mvvm pattern解决问题时，有一个思路很重要：你要写尽可能多的业务代码，而把UI渲染交给渲染引擎，也就是说，你的UI在任何一个时刻，只是你的业务逻辑的映射。我们把这个问题分割：1. 原始数据(data)：可能是从service取得2. UI状态(state)： 根据原始数据和用户操作取得3. 用户输入(action)：由UI产生，影响UI状态state4. 页面渲染(render)：只通过UI状态stage取得，只通过UI状态state取得，只通过UI状态state取得从而得到以下数据流：data --\u0026gt; (state + ( UI --\u0026gt; action ) --\u0026gt; state) --\u0026gt; render所以，只需要分别实现以上4个箭头(--\u0026gt;)所示的相应函数就可以了。1. data --\u0026gt; state在以上代码中，原始数据是var model var model = { \u0026#39;sellers\u0026#39;: }, { \u0026#39;name\u0026#39;: \u0026#39;jerry\u0026#39;, \u0026#39;products\u0026#39;: } ] };我们来建立业务逻辑的数据模型，由于原始数据里面没有选中与否的信息，所以我们希望插入selected flag，如下所示。然后我们再考虑从data到state需要怎样转化。var state，通过reduce(model, {type: \u0026#39;INIT\u0026#39;})得到，初始情况下，得到的state是{ "sellers": , "selected": false }, { "id": "1", "name": "jerry", "products": , "selected": false } ]}可以看到，state在原始数据中的seller和product插入了是否选中（selected）的flag，任何一个时刻，某个checkbox选中与否，只由其相应的selected flag控制。另外还插入了一些id值，这是为了jquery trigger event时event handler能够得知哪一个数据被操作了，如果你用Vue，Angular，React等framework，应该是可以直接传递被操作的object，id可能就没什么用了。2. UI --\u0026gt; action 以下代码绑定UI事件，用了jquery的代理绑定。 container.on(\u0026#39;click\u0026#39;, \u0026#39;input\u0026#39;, handleSellerCheckboxClick); container.on(\u0026#39;click\u0026#39;, \u0026#39;input\u0026#39;, handleProductCheckboxClick);以下是seller checkbox点击的event handler，可以看到我们新建了一个action对象，然后用action去更新当前的state。action中定义了类型是“SELECT_SELLER”，是否被选中的flag，以及哪个seller刚刚被操作了。然后，我们用这个action来更新当前的state -- state = reduce(state, action) 。更新后的state用来重新渲染UI -- render(state)。 function handleSellerCheckboxClick (e) { var checkbox = $(e.target); var selected = checkbox.prop(\u0026#39;checked\u0026#39;); var action = { type: \u0026#39;SELECT_SELLER\u0026#39;, data: { selected: selected, sellerId: checkbox.attr(\u0026#39;data-seller-id\u0026#39;) } } state = reduce(state, action); render(state); } 3. state + action --\u0026gt; statereduce函数具体我就不贴了，主要的思路就是，给定当前状态（state）以及一个输入（action），得到新的状态（state）。你的“三级联动”的逻辑，只在reduce函数中体现：也就是通过当前state，和输入action，来返回一个新的state，里面的selected flag发生了变化。注意，state = reduce(state, action)这个call是一个典型的有限状态机实现，学过数字电路的话这个概念应该不陌生，这其实就是Redux的主要思路。4. state --\u0026gt; renderstate更新以后，就可以直接渲染了。getHTML(state)是渲染函数，输入是state，输出是根据state得到的DOM字符串。每当state变化时，render(state)被call，通过getHTML(state)得到当前状态下的DOM映射，交给浏览器重新渲染。这部分可以替换成React，Vue，Angular等等渲染工具。=============================看起来好像做一个简单的事情用了很多的code，原因其一是以上code基本上是实现了一个渲染引擎雏形，其二是做了View相关和state相关函数的分离，注意，其中大多数函数都是可测试的，亦即，给定一组参数，只产生一个输出；另外，View相关的渲染，只和state对象相关，所以也是可测试的。


推荐阅读


上一篇：怎么样保证 android 推送及时

下一篇：微信会推出基于位置的群组功能吗