為什么 <h1> 標簽不顯示使用骨干網？

Question

我正在嘗試使用骨干js加載一個html文件並需要js文件。我能夠調用view的初始化函數，但無法加載該html文件，這是我的代碼

define([
    'jquery',
    'underscore',
    'backbone',

    'text!templates/stats.html'
], function ($, _, Backbone, statsTemplate) {
    'use strict';
    var AppView = Backbone.View.extend({

        // Instead of generating a new element, bind to the existing skeleton of
        // the App already present in the HTML.
        el: '#todoapp',

        // Compile our stats template
        template: _.template(statsTemplate),

        // Delegated events for creating new items, and clearing completed ones.
        events: {

        },

        // At initialization we bind to the relevant events on the `Todos`
        // collection, when items are added or changed. Kick things off by
        // loading any preexisting todos that might be saved in *localStorage*.
        initialize: function () {


   alert('-in--')
        },

        // Re-rendering the App just means refreshing the statistics -- the rest
        // of the app doesn't change.
        render: function () {

        }
        // Add a single todo item to the list by creating a view for it, and
        // appending its element to the `<ul>`.



    });

    return AppView;

})

我在初始化函數中收到警報，無法加載html文件

這是我的代碼http://plnkr.co/edit/rhoE1H9A8nfu6II64aEo?p=preview

Answer 1

感謝您抽出寶貴的時間來建立一個有效的示例。

不幸的是，Backbone並沒有免費提供給您很多，因此有一些手動步驟可以使此工作正常進行：

1. 在使用el: '#todoapp'定位時，將<div id="todoapp"></div>到index.html，但它不存在。

2. 正在執行template: _.template(statsTemplate)將返回模板的編譯版本（作為函數）。 然后，您需要像調用函數一樣調用它，可以選擇傳入上下文，以便模板可以呈現動態數據。 例如this.template() 。

3. render方法不會自動被調用，因此當您准備渲染視圖時（通常是立即完成，但可能在AJAX響應之后），您需要調用this.render() 。 在你的情況下立即initialize 。

4. 最后，在render您可以將渲染的模板附加到視圖的元素： this.$el.html(this.template());

更新的示例： http : //plnkr.co/edit/6HyOhuQ7LGL91rS8slJX?p=preview

我建議您使用此通用渲染流創建一個BaseView，這樣就不必每次都重復它。 同樣，在BaseView中設置一個子視圖的概念也是個好主意，這些子視圖在調用父級的remove時可以正確清理，而在調用父級的render時重新渲染。

這是使用BaseView的示例： http : //jsfiddle.net/ferahl/xqxcozff/1/