diff --git a/lib/core/renderer.js b/lib/core/renderer.js index 93c5a07..2fd7527 100644 --- a/lib/core/renderer.js +++ b/lib/core/renderer.js @@ -308,13 +308,24 @@ const queueReactiveTask = (element, type, task) => { */ const updateElementProperty = (element, setter, getter, optional, key, config) => { + // We need the parent element of the element we're updating + const parent_element = element.parentElement; + + // Get the current value from the element we're updating let current_value = getter(element, key); // We have to execute the expression to get the new value let renderer = new Hawkejs.Renderer(element.hawkejs); - renderer[Hawkejs.ANCESTOR_ELEMENT] = element; - let variables = element[Hawkejs.VARIABLES]; + // Set the parent element as the ancestor (`current_element` property) + // This is important, since updating an element's property, + // attributes, state, ... should actually fetch data from its + // "upper" scope + renderer[Hawkejs.ANCESTOR_ELEMENT] = parent_element; + + // The variables do have to come from the element itself? + // @TODO: Doesn't make a lot of sense, but tests fail without it + let variables = element?.[Hawkejs.VARIABLES]; if (variables) { renderer.active_variables = variables; @@ -630,7 +641,7 @@ Renderer.setProperty(function current_variables() { * @since 2.2.3 * @version 2.2.3 * - * @type {Boolean} + * @type {boolean} */ Renderer.setProperty(function on_template_root_level() { diff --git a/test/10-expressions.js b/test/10-expressions.js index d29f5cc..68a5b92 100644 --- a/test/10-expressions.js +++ b/test/10-expressions.js @@ -1427,6 +1427,98 @@ This should be a converted variable: test2 `, ], + // Passing down state (nested test) + [ + // Prepare the state & variables + (vars) => { + state = {}; + state.message = vars.set('original_message', Optional('init')); + state.times = vars.set('original_times', Optional(2)); + }, + ` + + `, + ` + +
+ +
+ +
+
+
+
+
+
+
+ `, + () => { + // Change the amount of times it should render + state.times.value = 1; + }, + ` + +
+ +
+
+
+
+
+ `, + () => { + // Change the message and the times + state.message.value = 'change'; + state.times.value = 2; + }, + ` + +
+ +
+ +
+
+
+
+
+
+
+ `, + () => { + // Change the amount of times only + state.times.value = 1; + }, + ` + +
+ +
+
+
+
+
+ `, + () => { + // Change the message + state.message.value = 'third'; + }, + ` + +
+ +
+
+
+
+
+ `, + ], ]; createReactiveTests(tests); diff --git a/test/helpers/_load.js b/test/helpers/_load.js index b95f01f..1dba353 100644 --- a/test/helpers/_load.js +++ b/test/helpers/_load.js @@ -22,4 +22,5 @@ module.exports = function loadHawkejs(hawkejs) { hawkejs.load(test_base + '/helpers/state_value_test.js'); hawkejs.load(test_base + '/helpers/test_ref_button.js'); hawkejs.load(test_base + '/helpers/prop_passing_down.js'); + hawkejs.load(test_base + '/helpers/state_passing_down.js'); } \ No newline at end of file diff --git a/test/helpers/state_passing_down.js b/test/helpers/state_passing_down.js new file mode 100644 index 0000000..ce4ed47 --- /dev/null +++ b/test/helpers/state_passing_down.js @@ -0,0 +1,15 @@ +/** + * state-passing-down element + */ +const StatePassingDown = Blast.Bound.Function.inherits('Hawkejs.Element', 'StatePassingDown'); + +StatePassingDown.setTemplateFile('elements/state_passing_down'); + +StatePassingDown.defineStateVariable('message', { + type : 'string', +}); + +StatePassingDown.defineStateVariable('times', { + type : 'integer', + default : 0 +}); \ No newline at end of file diff --git a/test/templates/elements/state_passing_down.hwk b/test/templates/elements/state_passing_down.hwk new file mode 100644 index 0000000..4e93ab1 --- /dev/null +++ b/test/templates/elements/state_passing_down.hwk @@ -0,0 +1,11 @@ + +
+ {% if state:times{:} gt 0 %} + + {% /if %} +