Can a NativeScript viewModel have “computed” properties?
Say I had a simple viewModel where the property foo should be just like any other, only that it's generated/computed with the value of another property and updates whenever the other one updates:
const observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
const viewModel = observableModule.fromObject({
name: 'John',
foo() {
return 'Hello ' + viewModel.name; //not really what I'm looking for
}
});
return viewModel;
}
Knockout.js has these "computed" observables, which I find very handy in many places. This is what it would look like with Knockout.js:
function HomeViewModel() {
const viewModel = {
name: ko.observable('John'),
foo: ko.pureComputed(() => 'Hello ' + viewModel.name())
};
return viewModel;
}
Is there something similar in NativeScript?
javascript mvvm knockout.js observable nativescript
asked Nov 25 '18 at 13:09
StackyStacky
490420
add a comment |
Say I had a simple viewModel where the property foo should be just like any other, only that it's generated/computed with the value of another property and updates whenever the other one updates:
const observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
const viewModel = observableModule.fromObject({
name: 'John',
foo() {
return 'Hello ' + viewModel.name; //not really what I'm looking for
}
});
return viewModel;
}
Knockout.js has these "computed" observables, which I find very handy in many places. This is what it would look like with Knockout.js:
function HomeViewModel() {
const viewModel = {
name: ko.observable('John'),
foo: ko.pureComputed(() => 'Hello ' + viewModel.name())
};
return viewModel;
}
Is there something similar in NativeScript?
javascript mvvm knockout.js observable nativescript
asked Nov 25 '18 at 13:09
StackyStacky
490420
add a comment |
Say I had a simple viewModel where the property foo should be just like any other, only that it's generated/computed with the value of another property and updates whenever the other one updates:
const observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
const viewModel = observableModule.fromObject({
name: 'John',
foo() {
return 'Hello ' + viewModel.name; //not really what I'm looking for
}
});
return viewModel;
}
Knockout.js has these "computed" observables, which I find very handy in many places. This is what it would look like with Knockout.js:
function HomeViewModel() {
const viewModel = {
name: ko.observable('John'),
foo: ko.pureComputed(() => 'Hello ' + viewModel.name())
};
return viewModel;
}
Is there something similar in NativeScript?
javascript mvvm knockout.js observable nativescript
asked Nov 25 '18 at 13:09
StackyStacky
490420
Say I had a simple viewModel where the property foo should be just like any other, only that it's generated/computed with the value of another property and updates whenever the other one updates:
const observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
const viewModel = observableModule.fromObject({
name: 'John',
foo() {
return 'Hello ' + viewModel.name; //not really what I'm looking for
}
});
return viewModel;
}
Knockout.js has these "computed" observables, which I find very handy in many places. This is what it would look like with Knockout.js:
function HomeViewModel() {
const viewModel = {
name: ko.observable('John'),
foo: ko.pureComputed(() => 'Hello ' + viewModel.name())
};
return viewModel;
}
Is there something similar in NativeScript?
javascript mvvm knockout.js observable nativescript
javascript mvvm knockout.js observable nativescript
asked Nov 25 '18 at 13:09
StackyStacky
490420
asked Nov 25 '18 at 13:09
StackyStacky
490420
edited Nov 25 '18 at 13:36
Stacky
asked Nov 25 '18 at 13:09
StackyStacky
490420
asked Nov 25 '18 at 13:09
StackyStacky
490420
asked Nov 25 '18 at 13:09
StackyStacky
490420
490420
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
NativeScript Core is very light weight, no fancy features like computed out of the box. But there is propertyChangeEvent which you may utilise to update foo whenever name is changed.
var observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
var viewModel = observableModule.fromObject({
name: "John",
foo: ""
});
viewModel.on("propertyChange", function (event) {
const propertyName = event.propertyName;
if (propertyName === "name") {
viewModel.set("foo", "Hello " + event.value);
}
});
// To compute initial value for `foo`
viewModel.notifyPropertyChange("name", viewModel.get("name"), viewModel.get("name"));
return viewModel;
}
module.exports = HomeViewModel;
Here is a playground sample.
I would suggest migrating to Angular / Vue if you looking for fancy features like computing, dynamic templates etc., with handy syntax. I haven't used Knockout, but I guess it could be integrated with with NativeScript just like the way Angular / Vue today with some decent effort - end of the day everything is just JavaScript ;)
answered Nov 25 '18 at 14:30
ManojManoj
6,4412922
Thank you. Though I'm already aware of thepropertyChangehandler, I don't really like it, because it gets triggered whenever any property changes, even if I only want to listen to a single one. That's why I am/was hoping there would be another way. Plus, this only works within the viewModel. If I had another model who's property I'd like to use instead ofnamein my example, I couldn't do that. -- Don't know if Knockout could be ported. But I guess since Angular and Vue have been ported, it should be possible. (Though I couldn't do it since I'm just a "consumer" of the framework ^_^)
– Stacky
Nov 25 '18 at 14:42
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53467779%2fcan-a-nativescript-viewmodel-have-computed-properties%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
NativeScript Core is very light weight, no fancy features like computed out of the box. But there is propertyChangeEvent which you may utilise to update foo whenever name is changed.
var observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
var viewModel = observableModule.fromObject({
name: "John",
foo: ""
});
viewModel.on("propertyChange", function (event) {
const propertyName = event.propertyName;
if (propertyName === "name") {
viewModel.set("foo", "Hello " + event.value);
}
});
// To compute initial value for `foo`
viewModel.notifyPropertyChange("name", viewModel.get("name"), viewModel.get("name"));
return viewModel;
}
module.exports = HomeViewModel;
Here is a playground sample.
I would suggest migrating to Angular / Vue if you looking for fancy features like computing, dynamic templates etc., with handy syntax. I haven't used Knockout, but I guess it could be integrated with with NativeScript just like the way Angular / Vue today with some decent effort - end of the day everything is just JavaScript ;)
answered Nov 25 '18 at 14:30
ManojManoj
6,4412922
Thank you. Though I'm already aware of thepropertyChangehandler, I don't really like it, because it gets triggered whenever any property changes, even if I only want to listen to a single one. That's why I am/was hoping there would be another way. Plus, this only works within the viewModel. If I had another model who's property I'd like to use instead ofnamein my example, I couldn't do that. -- Don't know if Knockout could be ported. But I guess since Angular and Vue have been ported, it should be possible. (Though I couldn't do it since I'm just a "consumer" of the framework ^_^)
– Stacky
Nov 25 '18 at 14:42
add a comment |
NativeScript Core is very light weight, no fancy features like computed out of the box. But there is propertyChangeEvent which you may utilise to update foo whenever name is changed.
var observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
var viewModel = observableModule.fromObject({
name: "John",
foo: ""
});
viewModel.on("propertyChange", function (event) {
const propertyName = event.propertyName;
if (propertyName === "name") {
viewModel.set("foo", "Hello " + event.value);
}
});
// To compute initial value for `foo`
viewModel.notifyPropertyChange("name", viewModel.get("name"), viewModel.get("name"));
return viewModel;
}
module.exports = HomeViewModel;
Here is a playground sample.
I would suggest migrating to Angular / Vue if you looking for fancy features like computing, dynamic templates etc., with handy syntax. I haven't used Knockout, but I guess it could be integrated with with NativeScript just like the way Angular / Vue today with some decent effort - end of the day everything is just JavaScript ;)
answered Nov 25 '18 at 14:30
ManojManoj
6,4412922
Thank you. Though I'm already aware of thepropertyChangehandler, I don't really like it, because it gets triggered whenever any property changes, even if I only want to listen to a single one. That's why I am/was hoping there would be another way. Plus, this only works within the viewModel. If I had another model who's property I'd like to use instead ofnamein my example, I couldn't do that. -- Don't know if Knockout could be ported. But I guess since Angular and Vue have been ported, it should be possible. (Though I couldn't do it since I'm just a "consumer" of the framework ^_^)
– Stacky
Nov 25 '18 at 14:42
add a comment |
NativeScript Core is very light weight, no fancy features like computed out of the box. But there is propertyChangeEvent which you may utilise to update foo whenever name is changed.
var observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
var viewModel = observableModule.fromObject({
name: "John",
foo: ""
});
viewModel.on("propertyChange", function (event) {
const propertyName = event.propertyName;
if (propertyName === "name") {
viewModel.set("foo", "Hello " + event.value);
}
});
// To compute initial value for `foo`
viewModel.notifyPropertyChange("name", viewModel.get("name"), viewModel.get("name"));
return viewModel;
}
module.exports = HomeViewModel;
Here is a playground sample.
I would suggest migrating to Angular / Vue if you looking for fancy features like computing, dynamic templates etc., with handy syntax. I haven't used Knockout, but I guess it could be integrated with with NativeScript just like the way Angular / Vue today with some decent effort - end of the day everything is just JavaScript ;)
answered Nov 25 '18 at 14:30
ManojManoj
6,4412922
NativeScript Core is very light weight, no fancy features like computed out of the box. But there is propertyChangeEvent which you may utilise to update foo whenever name is changed.
var observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
var viewModel = observableModule.fromObject({
name: "John",
foo: ""
});
viewModel.on("propertyChange", function (event) {
const propertyName = event.propertyName;
if (propertyName === "name") {
viewModel.set("foo", "Hello " + event.value);
}
});
// To compute initial value for `foo`
viewModel.notifyPropertyChange("name", viewModel.get("name"), viewModel.get("name"));
return viewModel;
}
module.exports = HomeViewModel;
Here is a playground sample.
I would suggest migrating to Angular / Vue if you looking for fancy features like computing, dynamic templates etc., with handy syntax. I haven't used Knockout, but I guess it could be integrated with with NativeScript just like the way Angular / Vue today with some decent effort - end of the day everything is just JavaScript ;)
answered Nov 25 '18 at 14:30
ManojManoj
6,4412922
answered Nov 25 '18 at 14:30
ManojManoj
6,4412922
answered Nov 25 '18 at 14:30
ManojManoj
6,4412922
answered Nov 25 '18 at 14:30
ManojManoj
6,4412922
6,4412922
Thank you. Though I'm already aware of thepropertyChangehandler, I don't really like it, because it gets triggered whenever any property changes, even if I only want to listen to a single one. That's why I am/was hoping there would be another way. Plus, this only works within the viewModel. If I had another model who's property I'd like to use instead ofnamein my example, I couldn't do that. -- Don't know if Knockout could be ported. But I guess since Angular and Vue have been ported, it should be possible. (Though I couldn't do it since I'm just a "consumer" of the framework ^_^)
– Stacky
Nov 25 '18 at 14:42
add a comment |
Thank you. Though I'm already aware of thepropertyChangehandler, I don't really like it, because it gets triggered whenever any property changes, even if I only want to listen to a single one. That's why I am/was hoping there would be another way. Plus, this only works within the viewModel. If I had another model who's property I'd like to use instead ofnamein my example, I couldn't do that. -- Don't know if Knockout could be ported. But I guess since Angular and Vue have been ported, it should be possible. (Though I couldn't do it since I'm just a "consumer" of the framework ^_^)
– Stacky
Nov 25 '18 at 14:42
Thank you. Though I'm already aware of the
propertyChange handler, I don't really like it, because it gets triggered whenever any property changes, even if I only want to listen to a single one. That's why I am/was hoping there would be another way. Plus, this only works within the viewModel. If I had another model who's property I'd like to use instead of name in my example, I couldn't do that. -- Don't know if Knockout could be ported. But I guess since Angular and Vue have been ported, it should be possible. (Though I couldn't do it since I'm just a "consumer" of the framework ^_^)– Stacky
Nov 25 '18 at 14:42
Thank you. Though I'm already aware of the
propertyChange handler, I don't really like it, because it gets triggered whenever any property changes, even if I only want to listen to a single one. That's why I am/was hoping there would be another way. Plus, this only works within the viewModel. If I had another model who's property I'd like to use instead of name in my example, I couldn't do that. -- Don't know if Knockout could be ported. But I guess since Angular and Vue have been ported, it should be possible. (Though I couldn't do it since I'm just a "consumer" of the framework ^_^)– Stacky
Nov 25 '18 at 14:42
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53467779%2fcan-a-nativescript-viewmodel-have-computed-properties%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
