如何手動調用Backbone.js視圖的方法

Question

我正在為使用Backbone.js的網站編寫一個瀏覽器擴展。 其相關代碼如下所示（名稱已更改，以保護無辜者）：

var BigContainer = BigContainer || {};
(function($, exports) {
    var Thing = Backbone.View.extend({
    ...

    useful_func: function() {
        // Does something I need to call
    },
    ...
});

(function($, exports) {
    BigContainer.BaseView = Backbone.View.extend({
    ...
    render: function() {
        this.local_thing = new Thing({
            el: '.local_thing'
        });
    }
    ...
});

我還在<script>塊中插入一些代碼，以偵聽我從擴展程序注入的javascript文件發出的postMessage()調用。 我希望能夠從那里調用useful_func ，但是卻不知道該怎么做，或者我是否應該這樣做（如果沒有，那么我怎么才能得到相同的結果）。

例如，我嘗試了以下參考，所有參考都顯示為未定義：

• BigContainer.BaseView.$local_thing
• BigContainer.BaseView.local_thing
• Thing
• document.getElementsByClassName('local_thing')[0].useful_func

重要的是，由於我正在為自己不擁有的網站編寫擴展程序，因此無法修改該網站的Backbone.js代碼以幫助自己。 我需要處理其中的內容。

Answer 1

在行BigContainer.BaseView = Backbone.View.extend({ ，您正在定義一個稱為BaseView的新View類型，但這只是定義。您需要的是代碼中該視圖的實際實例。在其中執行new BaseView （在這種情況下，為以下位置：）

// Where view is created
(function($, undefined) {
    BigContainer.OtherThing = {
    ...
    create: function(config, params) {
        this.view = new BigContainer.BaseView(...);
    }
    ...
})

找到那個后，您將執行以下操作：

// Your code, reach into that instance and its subview, and call 'usefulFunc'.
BigContainer.OtherThing.view.local_thing.useful_func();