jsrenderjsviews

Cascading selects with JsViews: Making a select observe another select

I have two select elements on my page, "Make" and "Model". I have a large array containing all Models, each with a makeId, which correspond to the values of the items in the Make select. I'm using a converter to populate the data of the Model select based on the selected Make. The converter works on the initial load of the page, but it doesn't seem to be changing when I change the Make. It also changes if the Models array is modified in any way. Is there a way to get the Model select observe the Make select? I tried passing a variable to the second select containing the value of the first, but that didn't cause it to observe the change. Here is what the two selects look like:

<select id="Makes" data-link="selectedMake">
  {^{for ~root.data.Makes}}
    <option value="{{:value}}">{{:text}}</option>
  {{/for}}
</select>

<select id="Models" data-link="selectedModel">
  {^{for ~root.data.Models convert='getModelsForMake' ~make=selectedMake }}
    <option value="{{:value}}">{{:text}}</option>
  {{/for}}
</select>
Solution

  • You need to ensure that when the selectedMake changes, it triggers a refresh of the {^{for ~root.data.Models convert='getModelsForMake'}}. The problem is that your converter, getModelsForMake converter depends on selectedMake - but the {^{for}} tag doesn't 'know that'.

    There are a few different ways you can indicate a dependency on selectedMake.

    Declare dependency on the {^{for}}:

    {^{for ~root.data.Models convert='getModelsForMake' depends='selectedMake'}}

    Declare dependency on the converter, by adding code:

    $.views.converters.getModelsForMake.depends = "~root.selectedMake";

    Pass in selectedMake as second argument on {^{for}}:

    {^{for ~root.data.Models selectedMake convert='getModelsForMake'}}

    Introduce dependency by including a 'null check' for selectedMake, on {^{for}}:

    {^{for selectedMake && ~root.data.Models convert='getModelsForMake'}}

    Incidentally, I have alternative versions of cascading selects now included in the docs in the Data-linked <select> elements. (That link takes you to the relevant section).