代码之家 › 专栏 › 技术社区 › Chris

Emberjs Power select动态选项和选择器

ember-data ember.js

-2

Chris · 技术社区 · 7 年前

我正在努力寻找合适的模式。我有一个模型,它代表一个叫做 selector 每个 选择器 有一个 hasMany 具有 selectorOption 这构成了 选择器

然后我有一个 dashboardItem 在每个上循环的模型 选择器 并实施。

路线js公司

export default Route.extend({

  model(params) {
    return RSVP.hash({
      dashboard: get(this, 'store').findRecord('dashboard', params.dashboard_id),
      selectors: get(this, 'store').findAll('selector'),
    });
  },

  setupController(controller, models) {
    controller.setProperties(models);
  },
});

样板哈佛商学院

{{#each selectors as |selector|}}
  <div class="column is-12 object-item">
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          {{selector.title}}
        </p>
      </header>
      <div class="card-content">
        {{#power-select-multiple
          placeholder="Vision"
          options=selector.selectorOptions
          searchEnabled=false
          onchange=(action 'something...') as |option|}}
          {{option.title}}
        {{/power-select-multiple}}
      </div>
    </div>
  </div>
{{/each}}

我不知道该怎么办 onchange ,可以使用自定义功能,也可以使用power select的内置工具。

每个选择器都是一个多选择器。

这可以正确地工作,我可以创建任意数量的选择器,它们以预期的正确选项显示在前端。

我应该如何保存用户根据 仪表板项目 ?

选择器 仪表板项目 (也许应该有?)

{
  "selectorOptions" : {
    "-Kyc7on207d_IxnNw2iO" : {
      "title" : "Apple",
      "vision" : "-Kyc7nG9Bz3aEGLked8x"
    },
    "-Kyc7qC9_uxFgXP9c7hT" : {
      "title" : "Orange",
      "vision" : "-Kyc7nG9Bz3aEGLked8x"
    },
    "-Kyc7qqZPMikoG1r3r5g" : {
      "title" : "Bannana",
      "vision" : "-Kyc7nG9Bz3aEGLked8x"
    },
    "-Kyc7uZu8MTfUdH70cBR" : {
      "title" : "Blue",
      "vision" : "-Kyc7rtTPTMJxAPacg-L"
    },
    "-Kyc7vJC3ImzVOEraALx" : {
      "title" : "Green",
      "vision" : "-Kyc7rtTPTMJxAPacg-L"
    },
    "-Kyc7wCrqDz8CD_I-dYy" : {
      "title" : "Red",
      "vision" : "-Kyc7rtTPTMJxAPacg-L"
    }
  },
  "selectors" : {
    "-Kyc7nG9Bz3aEGLked8x" : {
      "title" : "Fruits",
      "selectorOptions" : {
        "-Kyc7on207d_IxnNw2iO" : true,
        "-Kyc7qC9_uxFgXP9c7hT" : true,
        "-Kyc7qqZPMikoG1r3r5g" : true
      }
    },
    "-Kyc7rtTPTMJxAPacg-L" : {
      "title" : "Colours ",
      "selectorOptions" : {
        "-Kyc7uZu8MTfUdH70cBR" : true,
        "-Kyc7vJC3ImzVOEraALx" : true,
        "-Kyc7wCrqDz8CD_I-dYy" : true
      }
    }
  }
}

1 回复 | 直到 7 年前

Chris 6 年前

解决方案是不与基本阵列存储的关系作斗争。

例如

基础

export default Model.extend({
  title: attr('string'),
  visionOptions: hasMany('vision-option'),
});

基本选项

export default Model.extend({
  title: attr('string'),
  vision: belongsTo('vision'),
});

保存选定对象的模型

export default Model.extend({
  //...
  visionOptions: hasMany('vision-option', {async: true}),
  //...
});

要处理保存和选择正确对象的组件

export default Component.extend({

  tagName: "",
  classNames: "",

  selectedVisions: computed('dashboardItem.visionOptions', function () {
    const visionId = this.get('vision.id');
    const options = this.get('dashboardItem.visionOptions');

    return options.filterBy('vision.id', visionId);
  }),

  actions: {
    addVision(newList) {
      let dashboardItem = get(this, 'dashboardItem');
      let options = get(this, 'selectedVisions');

      options.forEach(function (me) {
        if (!newList.includes(me)) {
          dashboardItem.get('visionOptions').removeObject(me);
        }
      });

      newList.forEach(function (me) {
        if (!options.includes(me)) {
          dashboardItem.get('visionOptions').pushObject(me);
        }
      });

      dashboardItem.save().then(() => {
        dashboardItem.notifyPropertyChange('visionOptions')
      });
    }
  }

});

用于渲染power select的模板

  {{#power-select-multiple
    placeholder=""
    options=vision.visionOptions
    searchEnabled=false
    selected=selectedVisions
    onchange=(action 'addVision') as |vision|}}
    {{vision.title}}
  {{/power-select-multiple}}

这允许存在未知数量的“Vision”,并加载和保存未知数量的“visionObjects”。

这个 notifyPropertyChange 需要更新计算属性,以便在用户添加或删除选定对象时呈现前端。这很尴尬,因为没有直接已知的数据库密钥。