小编Cap*_*row的帖子

我正在 Vue.js 中构建一个由 Firebase 支持的自动完成菜单（使用 vue-fire）。目的是开始输入用户的显示名称并在下面的 div 列表中显示匹配记录。

模板如下所示：

<b-form-input id="toUser"
    type="text"
    v-model="selectedTo"
    @change="searcher">
</b-form-input>

<div v-on:click="selectToUser(user)" class="userSearchDropDownResult" v-for="user in searchResult" v-if="showSearcherDropdown">{{ user.name }}</div>

单击潜在匹配项后，目的是设置该字段的值并清除匹配项列表。

这是组件的代码部分：

computed: {
  /* method borrowed from Reddit user imGnarly: https://www.reddit.com/r/vuejs/comments/63w65c/client_side_autocomplete_search_with_vuejs/ */
  searcher() {
    let self = this;
    let holder = [];
    let rx = new RegExp(this.selectedTo, 'i');
    this.users.forEach(function (val, key) {
      if (rx.test(val.name) || rx.test(val.email)) {
        let obj = {}
        obj = val;
        holder.push(obj);
      } else {
        self.searchResult = 'No matches found';
      }
    }) …

我正在寻找有关GWT架构的指导 - 何时使用自包含小部件与MVP /活动/场所.

背景

阅读了Google文档并搜索了Stackoverflow,gwt-examples项目为这个问题提供了最好的说明:http: //code.google.com/p/gwt-examples/source/browse/trunk_2012/DemoGwtEditor/src/com/ gonevertical /客户端/ R = 3138#客户端%2Fviews

应用程序分为强解耦视图,每个视图对应一个DOM对等体.活动和地点用于管理给定视图的逻辑/ RPC和导航.虽然不精确,但为简洁起见,我将此模式称为MVP.

窗口小部件不符合此模式,包含视图和逻辑/ RPC调用.

上下文

对于这个问题的上下文,我正在考虑使用TabLayoutPanel创建单独的"屏幕"的复杂GWT应用程序.每个标签/屏幕广泛地涉及用户活动.Mint.com是这种界面的一个很好的例子:仪表板选项卡,交易选项卡,预算选项卡,趋势选项卡等.每个选项卡都是由许多子组件构建的:带有选择器的图表,报表选择器,交易表等

像事务表这样的子组件可能是几个GWT本机的组合 - 例如具有几个按钮的表.谷歌doco将这种子组件显示为被解组为MVP.

假设 - 小部件与MVP

使用MVP处理子组件意味着:

• 每个标签或的非常大的视图和活动/演示者类
• 嵌套MVP和文件爆炸(每个子组件5个)

另一方面,作为小部件的子组件意味着:

• 非常轻松的MVP结构,只需管理选项卡的导航历史记录; 几乎不值得
• 没有解耦(因此难以进行单元测试和切换视图)

问题

• 这些假设是否正确？
• 何时在解耦视图/ MVP上使用自定义复合小部件(反之亦然)？