JavaScript, JavaScript code snippets

At this moment I love errors module

Discussion

Right now I do this

var newData = Object.assign(view.viewDataTemplate, view.viewData, pageData);
var isNewData = false;
for (var i = 0; i < view.viewDataKeysCount; i++) {
if (view.viewData[view.viewDataKeys[i]] !== newData[view.viewDataKeys[i]] || force) {
view.viewData[view.viewDataKeys[i]] = newData[view.viewDataKeys[i]];
isNewData = true;
}
}

Discussion

pageData is fresh data from the store

Discussion

viewData is the old data stored inside the component

Discussion

var viewDomain = controllerViewFactory("FileBrowser", [
viewFactory(
{
sort: ""
},
procedures.renderFileBrowser
),

viewFactory(
{
itemEntryContainer: {}
},
procedures.renderFileList
),

viewFactory(
{
navObjects: {}
},
procedures.renderNavBar
),

viewFactory(
{
folderList: {}
},
procedures.renderSidebar
)
]);

Discussion

Each viewFactory is just a very basic object with some props (the data template, their view data, keys, the number of those keys, and finally the rendering procedure that manipulates the DOM) and a Promise generator (for view dependencies)

Discussion

Not quite, but their render interfaces can eventually trigger a render procedure that does

Discussion

Each render procedure is actually a promise, with a resolve() call after the important parts of the DOM have been loaded by it

Discussion

I do have a force argument that makes that render happen, I just don't know how to tell those child views: "Hey! Something deleted your DOM elements! Re render now!"

Discussion

I am thinking the easiest solution would be... a controllerview that is trying to render can find all the other controllerviews that are on the same level in the heirarchy as itself, then call a resetState interface on all of those, deleting state for the child views

Discussion

setState transfers a copy of the store's contents to pageData, then the controllerview calls it's own render interface, which calls componentUpdate which does the diffing and returns a boolean. if true, the controllerview calls the render interfaces of it's child views in order, waiting until each promise is resolved until it moves to the next

Discussion

That should trigger the render methods when necessary, right?

Discussion

Floofies please let me know if I understood your problem correctly - also, it would be useful to know how renderProcedure is implemented, or some examples

Discussion

renderProcedure is just a callback that gets executed by the views, it contains calls to jQuery-Template and manipulates the DOM, then adds event listeners to the dispatcher

Discussion

When the important parts of the template are done loading (for instance containers for other views, or just the whole thing), resolve() is used to alert the controllerview to move on to the next view

Discussion

That callback is fed into the viewFactory as the callback argument

Discussion

And, then executed here

render: function (pageData) {
return new Promise (function (resolve, reject) {
renderProcedure(resolve, reject, pageData);
});
}

Discussion

And so... the issue is pretty simple. Lets say I load View A with Data 1234. Then, I load View B, which overwrites all elements in the DOM. If I load View A again with 1234, it will not render.

Discussion

And if you look at the componentUpdate interface, it does indeed have a force argument, so the functionality to make it render is there, just not the mechanism to detect when we need to use it

Discussion

So if I want to make a new ControllerView paired to the LoginPage store, I do this

controllerViewFactory("LoginPage", [viewFactory(false, procedures.renderLoginPage)])

Discussion

The DOM will always contain a div called template-container, which, unless otherwise specified, is overwritten entirely by jQuery-Template

Discussion

To have the template-container state

Discussion

You tell parentStore that you want to change the view

Discussion