Your code does not seem to be runnable as provided, so I’m not going to try to debug it. However, since I’ve recently used moment.js, here is a minimal example of using it. Make sure the moment.js file is in the js subdirectory from your project folder and that your projectname.unoproj file has something like "js/*.js:Bundle" or **.js:Bundle" so that Fuse will see the js file, e.g:
Thanks for the reply, it was quite helpful. But the issue is, the date I am converting is not a numeric value as your example shows but a value from data coming from am API. How can I handle that? Kindly see code below as an example
var moment = require("js/moment.js");
var fromNow = function() {
var val = moment("{thread_published}", 'YYYYMMDD').fromNow();
console.log('val = ' + val);
return val
}
module.exports = {
news: model.getNews(),
fromNow: fromNow(),
getNewsDetail: function(args){
newsRouter.push("newsdetail", args.data)
}
}
</JavaScript>
The data string I want to display in the text value is {thread_published}. At the moment it returns invalid date.
In the code above I think you’re getting UX syntax (with the “{hello}” stuff) confused with javascript syntax. As far as I know, these are quite distinct things in Fuse. I don’t think you can use the “{hello}” syntax directly in your javascript business logic.
I’ll try to clarify with an example. Let’s say you’re getting the thread_published date from an asynchronous fetch request (maybe triggered by a button in the UI or something). You could bind that result to a Fuse javascript Observable object.
In your JS code something like this should work:
var moment = require("js/moment");
var Observable = require("FuseJS/Observable");
var thread_published_moment = Observable();
//https://developer.mozilla.org/en-US/docs/Web/API/Request
var url = 'http://your.service.com';
var request = new Request(url);
var response = fetch(request);
response.then(function(response) {
responseJson = response.json();
console.log("response = " + JSON.stringify(responseJson));
return responseJson;
})
.then(function(jsonData) {
console.log("jsonData = " + JSON.stringify(jsonData));
var thread_published_string = jsonData.thread_published;
//set the observable value
var thread_published_moment.value = moment(thread_published_string);
return jsonData;
})
.catch(function(error) {
console.log("error = " + error.message);
return error.message;
});
// set up reactive functions so that any time thread_published_moment value changes, your UI will automatically update what is being displayed
var thread_published_as_string = thread_published_moment.map(function(m){return m.format('YYYY-MM-DD')});
var thread_published_from_now = thread_published_moment.map(function(m){return m.fromNow()});
modules.export = {
thread_published_as_string: thread_published_as_string,
thread_published_from_now: thread_published_from_now
};
This will automatically be updated each time your fetch request runs or any time you modify the value of the underlying thread_published_moment observable object.
Note: I’m not an expert in Fuse, so maybe there is a better way to get things exposed in a reactive way than the reactive functions I’ve written (https://www.fusetools.com/docs/fusejs/observable). I know in a future release they are planning to provide a component ‘state’ API that is supposed to be better, but I don’t know if there is a nicer way to do handle it right now.
The example code I’ve provided is not a complete runnable example as I don’t have time to put that together right now, but I hope it’s helpful…
Hello Vlad. The little issue I have with your solution is that I could not get it to work with my working App. I already have a running news app. But the example you gave does not seem to work with my code. could you please show me example code that will work with my code?
Hmm, well, assuming your last post had all the javascript that was relevant (the starting Javascript tag was clipped, so I don’t know what else was missing), you can make the following changes:
<Javascript>
var moment = require("js/moment.js");
var thread_published = Observable();
// need get the date from somewhere like a local database or from the web...
thread_published.value = get_thread_published_as_string();
var fromNow = function() {
var val = thread_published.map(function(d) { return moment(d, 'YYYMMDD').fromNow()});
console.log('val = ' + val); //the observable that contains the value
console.log('val.value = ' + val.value); //the actual value
return val
}
module.exports = {
news: model.getNews(),
fromNow: fromNow(),
getNewsDetail: function(args) {
newsRouter.push("newsdetail", args.data)
}
}
</JavaScript>
In your UX file, you can use <Text Value="{fromNow}"/> and it will display the current value of thread_published using moment’s fromNow logic. Any time thread_published.value changes, this change will automatically be propagaged to what is displayed on the screen.