如何使用骨干.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>

這是我的jQuery手風琴。 我想使用bone.js來做到這一點，因此，如果您單擊“ Cleaning＆SpecialsInspectionSelect”復選框和“ VacancyInspectionandCleaningSelect”復選框，並填寫每個人的手風琴內容的其他輸入，它們將顯示在“ showHere” div中。

這是我嘗試過的一些代碼。 全部使用：

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

這是我嘗試過的一些方法：

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

還有更多：

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"));
    });
}

感謝您的幫助！

Answer 1

通常的方法是使用全局事件總線。 在每個人都能看到的地方復制Backbone.Events ：

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

然后，作為數據源的視圖將觸發一個事件：

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

另一個視圖將監聽該事件：

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
}

演示： http ： //jsfiddle.net/ambiguous/9zD7v/