emberjs - refactor custom link-to to htmlbars

Question

Раньше у меня был свой собственный link-to помощник, о котором я писал около here.

С рулю я мог передать аргументы, которые могут вызвать повторную визуализацию, если значение изменилось, например, если я привязку к модели, которая имеет isLoaded=false, то LinkView вид будет повторно визуализироваться при isLoaded=true или значение изменилось с неопределенного к его значению.

Ниже мой старый рули пользовательский ссылка-на Helper

Ember.Handlebars.registerHelper('resource-link-to', function(path, options) { 
    var args = Array.prototype.slice.call(arguments, 1); 
    var resource = this.get(path); 
    var resourceRoute = resource.humanize(); 

    if (!options.fn) { 
    options.types = ['STRING', 'STRING', 'ID']; 
    options.contexts = [this, this, this]; 
    args.unshift(path); 
    args.unshift(resourceRoute); 
    args.unshift(resource.get('displayName')); 
    } else { 
    options.types = ['STRING', 'ID']; 
    options.contexts = [this, this]; 
    args.unshift(path); 
    args.unshift(resourceRoute); 
    } 
    return Ember.Handlebars.helpers['link-to'].apply(this, args); 
}); 

ID маркер в этой линии означало это было обязательным:

options.types = ['STRING', 'STRING', 'ID']; 

Я пытаюсь повторить это в htmlbars в уголек 1.13.11, и я расширил LinkComponent и обернул willRender следующим образом:

export default LinkComponent.extend({ 
    willRender() { 
    // FIXME: allow for css classes and query params 
    Ember.assert('you must specify a resource', this.attrs.resource); 

    const resource = this.attrs.resource; 

    let resourceRoute = resource.value.humanize(); 

    if(typeToLinks[resourceRoute]) { 
     resourceRoute = typeToLinks[resourceRoute]; 
    } 

    this.set('attrs', { 
     params: [resource.value.get('displayName'), resourceRoute, resource], 
     view: this.parentView, 
     hasBlock: false, 
     escaped: true 
    }); 

    this._super(...arguments); 
    } 
}); 

Я тогда называем это следующим образом:

{{resource-linkto resource=activity.reference}} 

Проблема заключается в том, что resource может быть в состоянии isLoaded=false, как она частично решена.

Как я могу вызвать повторную визуализацию, когда значение будет разрешено, как я делал в рулях?

Answer 1

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

Как я могу вызвать повторную визуализацию, когда значение будет разрешено, как я делал в рулях?

Это, вероятно, будет проще всего решить с помощью наблюдателя на isLoaded свойстве resource и вызвать rerender() при изменении свойства:

export default LinkComponent.extend({ 

    // isLoaded: Ember.computed.alias('resource.isLoaded') // OR you can create this alias and use `isLoaded` instead of `resource.isLoaded` throughout your code 

    // rerender the component when the resource isLoaded becomes true 
    onResourceLoaded: Ember.observer('resource.isLoaded', function() { 
    if(this.get('resource.isLoaded')) { 
     this.rerender(); 
    } 
    } 

    willRender() { 
    // ... 
    } 
} 

---

Примечание

Код в пределах willRender будет вызываться снова после вызова rerender().

Если вам нужен этот код, чтобы выполнить только один раз, вы можете использовать следующую component hooks вместо willRender:

• didInsertElement, если вы хотите запускать код в первый раз, когда элемент вставляется в DOM.

• didInitAttrs Если вы хотите, чтобы код запускался после того, как компонент был создан и прошел attrs, обязательно будет присутствовать.