如何使用骨干.js将输入值发布到站点的其他区域？

Question

<div class="fmMenu accordion">

    <p class="menuItem">Cleaning &amp Specials Inspection
    <input type="checkbox" name="include" value="Cleaning&SpecialsInspectionSelect" class="headerCheckbox"></p>

    <div><h2>
             Notes<br /><textarea name="Clean&SpecialsInspectionNotes" value="" rows="4" cols"50"></textarea></h2>Start date<input type="text" class="datepicker" />       
    </div>




    <p class="menuItem">Porter Service
    <input type="checkbox" name="include" value="PorterServiceSelect" class="headerCheckbox"></p>
    <div><h2>
             Notes<br /><textarea name="PorterServiceNotes" rows="4" cols"50"></textarea></h2>Start date<input type="text" class="datepicker" />
    </div>



    <p class="menuItem">Vacancy Inspection and Cleaning
    <input type="checkbox" name="include" value="VacancyInspectionandCleaningSelect" class="headerCheckbox" id="joyridestop4"></p>
    <div><h2>
             Notes<br /><textarea name="VacancyInspectionandCleaningNotes" rows="4" cols"50"></textarea></h2>Start date<input type="text" class="datepicker" />
    </div>

</div>

<ol>
                            <li style="display:none" class="Cleaning&SpecialsInspectionSelect">Cleaning &amp Specials Inspection</li>
                            <li style="display:none" class"PorterServiceSelect">Porter Service</li>
                            <li style="display:none" class"VacancyInspectionandCleaningSelect">Vacancy Inspection and Cleaning</li>
</ol>



<div class="showHere"><div>

This is my jQuery accordion. I want to use backbone.js to make it so if you click on the "Cleaning&SpecialsInspectionSelect" checkbox and the "VacancyInspectionandCleaningSelect" checkbox and fill in the other inputs for each one's accordion content, they show up in the "showHere" div.

Here is some code I've tried. It all uses:

$(document).ready(function(){
var checkBoxArray = new Array(
              "Cleaning&SpecialsInspectionSelect",
              "PorterServiceSelect",
              "VacancyInspectionandCleaningSelect",
              );
});

Here's some I tried:

for(i = 0; i < checkBoxArray.length - 1; i++){
    $("input[value=" + checkBoxArray[i] + "]:checked ~ ." + checkBoxArray[i]).css(
    "display", "inherit"
    );
} 

Here's some more:

for(i = 0; i < checkBoxArray.length - 1; i++){
    var overviewElement = $("." + checkBoxArray[i]).hide(),
        ifChecked = $("input[value=checkBoxArray[i]]").click(function(){
            overviewElement.toggle(ifChecked.is(":checked"));
    });
}

Thank you for the help!

Answer 1

The usual approach is to use a global event bus. Make a copy of Backbone.Events somewhere that everyone can see it:

app.event_bus = _({}).extend(Backbone.Events);

Then the view that is the source of the data would trigger an event:

app.event_bus.trigger('some_event', data);

and the other view would listen for the event:

initialize: function() {
    this.listenTo(app.event_bus, 'some_event', this.some_method);
},
some_method: function(payload) {
    // `payload` will be the `data` from the `trigger` call
}

Demo: http://jsfiddle.net/ambiguous/9zD7v/