Framework: View update after model change

[bsrdjan]

I have a view in which new custom elements are injected based on model data change, something like this:

model

inputIDs = ['id1', 'id2']

view

<div repeat.for="input_id of inputIDs">
    <input id="${input_id}" type="text">
</div>

After the new id added to the model, I want to set the focus to new created input field but if I do that too early in the model code, the selector (window['id3']) does not find the element, I suppose because the view update not completed. Later on, the element is found, can set the focus.

Is there an elegant way to detect when the view is ready, after the model update, perhaps the ViewEngine event to listen to, or the View status ? Timeout solution would work but is there simpler and more elegant approach ?

[EisenbergEffect]

Have you tried creating an attached callback on your view model?

[bsrdjan]

In a following experiment attached is triggered only on initial load of the view, not on button click:

view

<div repeat.for="idx of IDS">
    <input type="text" id="${idx}">
</div>
<button type="button" click.delegate="addAndFocus();">Add and Focus</button>

model

IDS=['id1', 'id2'];

addAndFocus() {
  this.IDS.push('id3');
}

attached () {
  console.log('attached:', this.IDS);
  window.id3.focus();
}

When the model change initiates to the update of the view, need to find out when the view update is completed ?

During more complex view updates, let say adding several new elements, can the model know the view is in transition and not necessarily consistent (added half of all new elements for example) ?

[bsrdjan]

closed, not any more relevant

[Leonidnei]

Can you clarify how this was solved?

[mreiche]

I've done this with:

<md-input
    md-input.ref="titleInputElement"
    if.bind="editing"
    md-value.bind="item.title">
</md-input>

editTitle() {
    editing=true;
    window.setTimeout(()=>{
        this.titleInputElement.input.focus();
    });
}

I'm using the materialize bridge here, but this should also work:

<input ref="titleInputElement"/>