Durandal click call function from other file

Question

I have a main file(periods.js), that is opening by a click-bind an custom dialog:

periods.js

[...]
            openAddFreeDayDialog = function () {
            var dialog = {viewUrl: 'views/addFreeDay'};
            app.showDialog(dialog);
        },

        addFreeDay = function () {
            var data = $('#addFreeDay').serializeArray();
        },
[...]

periods.html

[...]
<button type="button" class="btn btn-success btn-block" data-bind="click:$root.openAddFreeDayDialog"><i class="fa fa-plus-circle fa-lg"></i> new</button>
[...]

The function openAddFreeDayDialog open this modal:

addFreeDay.html

<div class="modal-content autoclose">
    <div class="modal-header">
        <h3 class="modal-title">freien Tag hinzufügen</h3>
        <small>Dauert der dieser freie Tag nur einen Tag  müssen Entdatum und Startdatum übereinstimmen</small>
    </div>
    <div class="modal-body">
        <form id="addFreeDay">
            <div class="form-group">
                <label for="dayName">Bezeichnung für diesen Tag </label>
                <input type="text" class="form-control" id="dayName">
            </div>
            <div class="form-group">
                <label for="dayStartDate">Anfagsdatum des Tages </label>
                <input type="date" class="form-control" id="dayStartDate">
            </div>
            <div class="form-group">
                <label for="dayEndDate">Enddatum des Tages </label>
                <input type="date" class="form-control" id="dayEndDate">
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-success btn-lg btn-block" data-bind="click:$addFreeDay"><i class="fa fa-plus-circle fa-lg"></i>other new</button>
    </div>
</div>

I want to call in this dialog with a click-bind a other function of the main file:

<button type="button" class="btn btn-success btn-lg btn-block" data-bind="click:$addFreeDay"><i class="fa fa-plus-circle fa-lg"></i>other new</button>

I tried many thinks: click:addFreeDay , click:addFreeDay , click:$root.addFreeDay , click:periods.addFreeDay , click:$periods.addFreeDay , click:$root.periods.addFreeDay

Sometimes it gives me an error sometimes not. What do I wrong?

Answer 1

Do you have a corresponding periods.html file as the view?

In the periods.html file, you would have your markup, including your click binding. The viewModel behind that--the periods.js file--would contain the event handler for the click, which is where you would call your dialog. Those two files together, in Durandal and Aurelia, comprise an MVVM unit.

Depending on your compositional structure, most likely you would access the function with $data.addFreeDay.bind($data) as the handler. But it could just as easily be $parent.addFreeDay.bind($parent) or $root.addFreeDay.bind($root) , again, depending on your structure.