I would like to create a page for inserting a new car. I am using knockout.js and want to use knockout mapping. The problem is that for create, in order to get a structure for the mapping, I need to make an ajax call and return new and empty serialized object. Is there any to prevent this ajax call?
(I also don't want to write down the whole model structure by myself)
If you don't want to create a JavaScript version of your object and you don't want to do an ajax call to get it, it's not possible that Knockout magically knows the structure of your object.
What you could do, is use Fiddler to intercept the AJAX call. Fiddler will then show you the JSON representation of your object. You can copy paste this into your JavaScript so you have a 'cached' version of your model for first use. Pass this to Knockout and Knockout will create the object for you.
Of course the cached version will get out of sync with your server model (the same can happen with a plain JavaScript model). This is just something you have to deal with manually.
A way around this is to use a T4 template to do some code generation at compile time. Trough reflection you can generate a .js file with the up to date version of the model.
Related
The user performs some action which triggers an XMLHttpRequest GET request which returns JSON which is used to populate some dialog module.
I've used handlebarsjs which simplifies the creation of the HTML content, however, applying events to the newly created module is greatly complicated.
Is there a clean and maintainable method to add events to a Handlebars template? My current approach is to apply the events every time the module is opened which is less than ideal. If possible, it would be nice to render the DOM when loading the page but obviously without the JSON data which will populate the form, apply the events, and then update that values when the JSON is available. For each loops, I guess only one loop element would initially be rendered and then it would be cloned as needed when getting the real JSON data.
If not, are there other JavaScript template libraries that provide this functionality?
If not, I will likely abandon JavaScript based templates. Is there a leading other approach?
I have a task, where I need to render the inner page of a blog via JavaScript.
The page has infinite scroll feature.
On initial page load, I get all the data for the initial post via JSON string right in the HTML, then I render it with JavaScript.
For the next pages(for the infinite scroll) I need to make a call to an API, which then returns me the same JSON string for the next post.
My question is - how or even should I use MVC for this? I'm fairly new to the concept, still trying to jump on the right tracks.
I'm thinking bout the following setup now.
data.js - an object where I will store all the data that I get from JSON string, and it will have update(APIJSON) method to update itself from the API when I do a call.
template.js - just template literals - takes in date, returns HTML.
view.js - takes data.js as this.data in constructor, then has render method which takes the HTML that template returns and just puts it in content via innerHTML.
model.js - getPost() method does a call to api, returns data.
controller.js - This is the part where I'm not sure what to do here. Should controller listen to on scroll event, and if I reached the end of page it should then tell model to do getPost() and then view to do render()? How do I transfer the data I get from model's getPost() into my views render()? I can't seem to be able to call view from inside of XHR request?
Did I miss something? OR maybe my whole concept of how MVC works is false? All I need is someone to get me on the right track, I'll do the rest myself. Really loving JavaScript, started learning only few months back.
The controller.js file can host a method that will trigger the data fetch from the model and (returns it to the view | updates the data.js and triggers an observer to render it) when the Promise/Ajax call resolves.
But there is no need to be super strict on such a small project. Just use the structure that is the easiest to maintain for you in the future and makes sense to you.
I'm implementing a fairly simple application in javascript using the MVC approach. My views are using mustache as templating system.
When the application loads an api gets queried and it returns a complex object which I store in the model. When it's time to visualise the data on the view I'd need to transform this complex object in a much simpler version with less properties and nesting, in order for the template engine to be able to display the view.
I'm wondering if it's controller responsability to "adapt" the data for the view or this process should be delegated to some other part of the application.
I use Automapper to do convert entity framework models to simpler Viewmodels/DTO objects. It works by convention and when the convention doesn't work, you use a fluent API to tell it how to convert the properties.
Very simple to use and you only need to define your mapping logic once, which is exactly what you want.
Maybe you should create DTO object and map that object to you ViewModel
I am currently using Backbone.js as a front-end MVC system. Assume, however, that I have objects which are not necessarily models (for example, an object which parses JSON from a successful AJAX request).
How should I best represent these objects? I don't think they're "models" in the traditional sense. Should they just be normal JavaScript objects? It seems like Backbone should have some way to account for this.
Open to any feedback.
Objects doesn't have to be models just because you are using Backbone.
The Backbone Model object is basically just a wrapper around a regular object, that has methods for accessing the data, and events that you can use to subscribe to changes.
If you want to put the objects in a Backbone Collection, then they will be wrapped in models if they aren't already.
Thank you that you did not ask about controllers that do not exist in Backbone actually.
To my mind, there is no need to implement parsers (or any other services) as models in Backbone, because in this case you pull with a parser a lot of orphan code that you are never going to use.
I'm building a web app that displays a list of customers in a table. There are roughly 15 columns on the table containing different bits of data on these customers. The cells on the table receive user input frequently to update their values.
On page load, the web app sends off an AJAX request with qualifiers to retrieve the appropriate subset of customers out of all active customers. JSON is returned and extended on a global array of objects. Each item in this global array of objects represents a row on the table: var myCustomerList = [{customer_data_object_1},{customer_data_object_2},{customer_data_object_3}].
The HTML for the page is then generated via JavaScript, jQuery, and mustache.js templates. The JavaScript will loop through the global data object (i.e., myCustomerList[i]) and generate rows. I use jQuery's .data() method to link the row itself back to myCustomerList[i]:
$('#tbl_customer_list tr:last').data('cust_data',myCustomerList[i]);
I bind events to UI controls as each cell is appended to a row using jQuery:
$('#tbl_customer_list tr:last td:last a').on('click',function(event) {
custList.cellEvent.status.openDialog(this,event);
});
Event handling functions then refer back to my global data object using jQuery .data():
custList.cellEvent.status.openDialog = function(oLink,event) {
var oCustData = $(oLink).closest('tr').data('cust_data');
//update the global data object
oCustData.status = oLink.value;
}
I have separate code for reconciling changes made to the global data object with the data on the DB tables.
If the above confused you, this page gives a good overview of the client-side MVC approach I'm trying to take: https://sites.google.com/site/jollytoad/mvcusingjquery
So, two questions:
What is a better way of linking model data (browser-side) to the various UI components on the page? Remember I'm using .data() to create a link between the table row DOM element and the global data object.
What is a better way of organizing/storing the model data (i.e., myCustomerList)?
What I'm doing now works, but it seems a little hacky and I'm polluting the global namespace. I don't know how supportable and maintainable it'll be if we ever have to come back to this page and add widgets independent of the customer list.
I've been considering creating a class for the customer list table as a whole (and a new class for any other new widget added to the page) and storing the model data on a property of that class. But I thought I'd come here first to get some tips on best practices in this area.
Use a framework designed to handle this sort of thing, like Backbone, Spine, JavaScriptMVC and so forth.
We use Backbone where I work to handle all of this stuff -- it integrates super well with jQuery.
i think you should take a look at this instead:
http://addyosmani.com/largescalejavascript/
it's a modular pattern to handle various parts of the website. this pattern makes parts of the website independent of one another. each module can have it's own MVC and store it's own states. modules do not have the full logic of the application. it's handled by a sandbox API and core API.
as far as i understand, you load the table's data from the server into the table using AJAX. what i suggest you to do is make that table an independent module.
when it receives the AJAX data, store it in the object
after that, render your table based on that object, store the data into the table. what you put in the table is just the visual data. the actual data remains in that object earlier.
whenever you click on an item, the data in it is an exact reference to the original object you put in. whatever you do to it affects the original object.
Boris Moore is currently working on JsViews & JsRender which is the 'official' jQueryUI way of doing data binding and rendering. It‘s already usable and going beta soon.