JSViews: How to make data-linked helper functions update correctly

Question

I had a hard time figuring out how to data-link this scenario and thought of asking help several time but finally I resolved must of my issues, there is only one small part where I don't find the solution.

I started a JsFiddle to test it : http://jsfiddle.net/ClaudeVernier/U3dZ8/

// based on Sample: data-linking to <select>... and much more...
// http://www.jsviews.com/#jsvplaying

In this scenario, I have two lists, 'persons' and 'relations' (or how those persons relates to me).

Then, I want to build an array of span and dropdowns where the span displays the current value of the dropdown and show only the span or only the dropdown, depending if the user is is edit mode or not.

The template what shows the complete lists and the edit mode checkbox is based on the global model of the page while the lower part of the page is rendered from a template that is rendered for each items inside an array.

To link the visibility of the spans and dropdowns to the value of the checkbox, I used an helper but it is not bi-directional so the checkbox is not working. Is it that helper functions cannot be used for data linking ?

Thank you for any help or suggestion if my implementation is not correct. Best regards, Claude

Answer 1

Your helper - ~editMode() is not observable - JsViews does not know that it has a dependency on model.editMode - so observable changes to model.editMode will not trigger updates on bindings to ~editMode().

But you can declare a dependency, and it will then work:

$.views.helpers.editMode.depends = [model, "editMode"];

Here it is http://jsfiddle.net/U3dZ8/5/.

BTW the syntax here is that if you want to declare a dependency on a path on a different object than the current data object, you can pass in to the depends array any object, followed by one or more paths taking that object as root: ['path.from.currentObject', otherObject, 'path1.from.otherObject', 'path2,from.otherObject' .... ].

Another thing you can do (for the case where objects or paths are not statically determined up front) is to supply a function .depends = function() {return [listOfPaths_OrObjectsFollowedByPaths]};

An alternative (for your sample) to using the editMode() function with declared dependency (a JsViews computed observable) is to bind directly to model.editMode - as in:

data-link="visible{:!~model.editMode}" or data-link="visible{:~model.editMode}".

To do that you just need to pass in the model as a helper object:

jsDropDownsTemplate.link("#myDropDowns", model.myRelations, {model: model});

Here is that one: http://jsfiddle.net/U3dZ8/6/.