Доступ область применения компонента в пределах шаблона блока

если у меня есть компонент, называемый my-scope, который определяется только как:Доступ область применения компонента в пределах шаблона блока

export default Ember.Component.extend({ 
    foo: 'bar' 
})

, а затем я использовать компонент в шаблоне, например, так:

{{#my-scope}} 
    {{foo}} 
{{/my-scope}}

Как могу ли я достичь объема окружающего компонента блока? Я пробовал:

{{foo}}
{{component.foo}}
{{view.foo}}

Может быть, это тот случай, когда мне нужно использовать вид? Надеюсь, что нет, но, возможно, так и случилось.

примечания: мой вариант использование является гораздо более сложным, но давайте просто скажем, что нормальное связывание подход к компонентам {{#my-scope foo=outsideFoo}} ... {{/my-scope}} не выполним пример

источник

2015-01-18 ken

формат блока специально переместит вас из компонентов сферы и в родительской области, не существует какой-либо имеется ссылка из родительской области в компонент в связи с уровнем изоляции.Единственный способ сделать это состоял бы в том, чтобы компонент зарегистрировался сам с родителем (предоставив родителям возможность иметь ссылку на компонент), затем используйте ссылку родителя, чтобы затем показать foo каким-то магическим способом. – Kingpin2k

Спасибо @ Kingpin2k, я боялся магии, косвенности и хакерства. Я предполагаю, что если бы я использовал вид, то он * работал бы, верно? – ken

{{view.foo}} похоже, что он будет работать изнутри ... – Kingpin2k

Не зная ваш конкретный потребительный случай, это трудно понять, если для вас будет работать следующий ответ, но одно можно сказать наверняка - оно очень совместимо с философией Ember 2.0 «down down, action up» (см. this отличная работа Сэма Селикова).

Вы можете создать компонент, который направляет действия с данными, которые вы хотите доступны в вашем окружающем контексте следующим образом:

App.XTestComponent = Ember.Component.extend({ 
    foo: 'bar', 

    didInsertElement: function(){ 
    this.sendAction('action', this.get('foo')); 
    } 
});

Затем в вашем окружающем контексте (контроллер), вы можете поймать действия и установить соответствующие данные:

App.ApplicationController = Ember.Controller.extend({ 
    foo: 'controller', 
    actions: { 
    setFoo: function(param){ 
     this.set('foo', param); 
    } 
    } 
});

Теперь вы можете использовать foo переменные в окружающем контексте, как вы показали в примере:

<script type="text/x-handlebars"> 
    {{#x-test action='setFoo'}} Hmm {{ foo }} {{/x-test}} 
</script> 

<script type="text/x-handlebars" id='components/x-test'> 
    <h2>Testing</h2> 
    {{ yield }} 
</script>

См рабочий пример here

(В теории, вы можете сделать это с помощью наблюдателя, а не только внутри didInsertElement, но я не проверял.)

источник

2015-01-18 20:20:28 Kalman

Хорошо, я заинтригован, но я попробовал эта модифицированная версия вашего JSBIN и, похоже, не предоставляет локализованную область для блока: http://emberjs.jsbin.com/yezun/2/ ... Я думаю, что я все еще не полностью понимаю этот подход. – ken

Вы имеете в виду, что ВСЕГДА показывает значение 'foo' из компонента? Это потому, что как только свойство' foo' получает сброс в контроллере, оно становится новым значением во всем мире. Вы хотите сказать, что хотите, чтобы 'foo' был одним из элементов внутри блок и другой за пределами блока? Не уверен, что это возможно при таком подходе – Kalman

Да, я хочу «блок» k scope " – ken

Вы можете использовать _view.parentView доступа значение foo свойство внутри компонента. (Потому что есть подчеркивание в _view, для меня это означает, что это не публичный API, так что они могли бы избавиться от него в будущем - но это всего сейчас :))

Что-то вроде следующего:

{{#x-test}} Inside c1: {{ _view.parentView.foo.name }} {{/x-test}}

Работа демо here

источник

2015-01-19 15:06:18 Kalman

Доступ область применения компонента в пределах шаблона блока

ответ

Смежные вопросы