Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Feature Request) Action wrapper in template #143

Open
drowhunter opened this issue Sep 13, 2021 · 1 comment
Open

(Feature Request) Action wrapper in template #143

drowhunter opened this issue Sep 13, 2021 · 1 comment

Comments

@drowhunter
Copy link

So in mobx you can wrap anythin in an action wrapper , since actions are needed to modify state.
I have the following code

<input [(ngModel)]="mystore.foo>

since its a two way binding in strict mode it complains

what I am wondering is could you add a feature so that i could do this.

<input [(ngModel)]="action(() => myStore.foo)

I'm aware of the workaround to this.
`<input [ngModel]="myStore.foo" (ngModelChange)="setMyStore($event)">/input>

setMyStore(val:string){
this.myStore.setFoo(val) //action for setting
}

Is there a feature to be able to do an in-template action wrapper

@drowhunter
Copy link
Author

drowhunter commented Sep 13, 2021

So I found another solution to this problem but its not ideal

Instead of splitting the the [(ngModel)] binding into [ngModel] (ngModelChange)

I did this

export class MyStore implements OnInit {
  constructor() {
     makeAutoObservable(this)
  }

  private _foo: string = ''

  get foo (): string {
    return this._searchText
  }

  set foo(text: string) {
    this._foo = text
  }
}

<input [(ngModel)]="mystore.foo">

This seems to automatically make the set foo into an @action.
I'm guessing the get foo is turned into a @computed

still being able to wrap the variable in an action in the template would be a simpler solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant