NativeScript for Mobile App Development Data Binding and MVVM 1 — Questions and Answers
Question 1: What pattern does NativeScript natively support for separating UI and business logic?
- MVVM (Model-View-ViewModel) (Correct answer)
- MVC (Model-View-Controller)
- MVP (Model-View-Presenter)
- Flux
Correct answer: MVVM (Model-View-ViewModel)
NativeScript is designed around the MVVM pattern where the ViewModel exposes observable data to the View via data binding.
Question 2: Which NativeScript class must a ViewModel extend to support data binding?
- Observable (Correct answer)
- EventEmitter
- BindingContext
- DataSource
Correct answer: Observable
Extending the Observable class gives a ViewModel the `set` and `get` methods and `propertyChange` event needed for data binding.
Question 3: How is two-way data binding expressed in NativeScript XML?
- {{ property }} with `text` and setting bindingContext (Correct answer)
- Using [( )] syntax
- Using v-model directive
- Using formControl directive
Correct answer: {{ property }} with `text` and setting bindingContext
In plain NativeScript XML, `{{ property }}` in attribute values creates one-way bindings; two-way binding requires explicitly handling the textChange event alongside the bound value.
Question 4: What property on a NativeScript Page sets the data source for binding?
- bindingContext (Correct answer)
- dataContext
- viewModel
- model
Correct answer: bindingContext
Setting `page.bindingContext` to an Observable object makes its properties available for binding in the page's XML template.
Question 5: What method on an Observable object triggers property change notifications?
- set(propertyName, value) (Correct answer)
- notify(propertyName, value)
- emit(propertyName, value)
- update(propertyName, value)
Correct answer: set(propertyName, value)
Calling `this.set('propertyName', value)` on an Observable updates the value and fires a propertyChange event that updates bound UI.
Question 6: In NativeScript Angular, which directive binds a component property to a UI element's property?
- [property] (Correct answer)
- {{property}}
- (property)
- #property
Correct answer: [property]
Square bracket syntax [property]='expression' creates a one-way property binding from the component to the template element.
What pattern does NativeScript natively support for separating UI and business logic?