Question

我有一个标准组件定义如下：

export default Ember.Component.extend({
  hideIfEmptyChange: function() {

    var thingOfInterest = ...;
    var otherThingOfInterest = ...;

    ...
    // Perform some logic
    ...

    // Perform some logic using thingOfInterest
    // Perform exactly the same logic using otherThingOfInterest
  }.observes('hideIfEmpty.@each')
});

我想将最后两个部分的逻辑移动到它们自己的函数中，以防止为两个不同的变量写出两次相同的代码。

我可以在我的组件上编写一个操作并使用this.send('myAction',...) - 但如果它不会被使用（或者甚至是可用的）来自组件的模板？如果你不应该这样做那么你应该怎么做？

我的另一个想法是mixin's - 但这里的代码将完全特定于组件，所以再次感觉不是100％正确。

修改此组件用于观察窗口小部件的数组，这些窗口小部件显示在侧栏中。由于没有小部件，因此开始使用侧边栏。当添加一个小部件时，侧边栏然后使用我添加的引导类（col-md-0）和类似col-md-2之间的css3过渡滑出，同时主列从col-md之类的东西缩小-10到col-md-8。由于它从零宽度出来的性质，内部的小部件在动画期间挤压，因此需要在其中隐藏。所以通用代码将是：

function(element, classes) {
  var lowWidth = 50;

  // Transition looks awful if columns start from small width, so hide inner content until css3 transition complete if starting from low width
  if ($(element).width() < lowWidth) {
    $('div', element).hide();
    $(element).toggleClass(classes);
    $(element).on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
      $('div', element).fadeIn(250);

      $(this).off(e);
    });
  }
  else {
    $(element).toggleClass(classes);
  }
}

我的组件是块形式，实际上在模板中有侧边栏。

{{#hideable-cols hideIfEmpty=rightSidebarWidgets leftId="det-main" leftMinClass="col-md-8" leftMaxClass="col-md-10" rightId="det-sidebar-right" rightMinClass="col-md-0" rightMaxClass="col-md-2"}}
  <div id="det-main" class="col-md-10 resizes">
    {{outlet}}
  </div>
  <div id="det-sidebar-right" class="det-sidebar resizes col-md-0">
    {{widget-area widgets=rightSidebarWidgets saveObjectFromWidget="saveObjectFromWidget" removeWidget="removeRightWidget"}}
  </div>
{{/hideable-cols}}

如果我能设置'内部'组件，只能在父块组件满意之后才能对小部件数组中的更改做出反应，那么唯一能做我想要的其他方法就是这样。我在淘汰赛中使用了类似的东西，但在Ember中看不到这种功能，所以我的解决方法是隐藏添加小部件的div，进行转换并在之后再次显示div。

在Ember组件中，您应该在哪里放置不是动作的可重用代码？

0 个答案: