EmberJS 2.7 - с помощью действия закрытия для вызова функции против вызова этой функции в качестве действия

Question

В Ember с закрытием действия, которые вы можете передать функцию, например:

<div class="dropzone text-center" {{action (action openFilePicker)}}> 
<!-- this calls a function (no quotes!) --> 
    </div> 

вместо вызова действие, как показано ниже.

<div class="dropzone text-center" {{action (action 'openFilePicker')}}> 
<!-- this calls an action (quotes!) --> 
    </div> 

В (1) код подкладки этот компонент выглядит следующим образом:

openFilePicker: function() { 
    let child = this.$('div:first-child'); 
    child.removeClass('is-dragging'); 
    child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>'); 
    filepicker.pick({ 
     container: 'modal', 
     maxSize: (5 * 1024 * 1024), 
     services: ['COMPUTER'] 
    }); 
    } 

Это использует JQuery, чтобы удалить некоторые элементы из DOM, а затем вызывает другую функцию (filepicker. pick), который находится во внешнем загруженном JS-файле.

В (2) тот же код находится внутри действия:

actions: { 
    openFilePicker: function() { 
     let child = this.$('div:first-child'); 
     child.removeClass('is-dragging'); 
     child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>'); 
     filepicker.pick({ 
      container: 'modal', 
      maxSize: (5 * 1024 * 1024), 
      services: ['COMPUTER'] 
     }); 
    } 
} 

Каковы плюсы и минусы это делать? Я понимаю, что (1) не рекомендуется делать это, но, безусловно, (1) упрощает доступ к другому коду в component (например, свойства компонента). Как обычно, документация Ember, похоже, не проливает свет на это (не то, что я могу найти в любом случае). Все, что я могу найти, это this blog post, который заставляет отказаться от вызова произвольных функций (в противном случае почему у вас есть действия в первую очередь?)

Так что, хотя этот вопрос может привести к мнению, это не то, что я хочу. Я хочу понять, что такое разница между этими двумя подходами: SCOPING? Например, когда вы находитесь внутри функции INSIDE для действия, каково различие в области с точки зрения времени выполнения JS? Например, «это» одно и то же в обоих случаях?

Answer 1

На самом деле нет разницы. Оформить заказ this twiddle.

Единственное большое различие - время поиска действия. В то время как {{action 'foo'}} требует, чтобы foo существовал в указанное время, это не обязательно для ={{action 'foo'}} (действие закрытия).

Звонки на действия связаны с ember в текущем this контексте. Это в основном то, что делает помощник {{action}} для действий закрытия. Он создает новую функцию, которая вызывает исходную функцию с this, являющейся контекстом, когда был оценен вспомогательный помощник {{action}}.

Если вы вызываете другую функцию вне вашей текущей области действия this будет всегда быть другим. Важно понимать, что this всегда связан с областью действия функции.

Если вы вызываете функцию, подобную myfunction(), тогда this внутри этой функции будет null. Если вы вызываете функцию типа foo.myfunction(), то this внутри myfunction будет foo.

Убедитесь, что вы все понимаете this. В двух словах, this не отличается в Ember. Это стандартный Javascript.