javascript - 为什么

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. 添加<div id="todoapp"></div>到index.html，因为您使用 el: '#todoapp' 来定位它但它不存在。

2. 正在做template: _.template(statsTemplate)将返回模板的编译版本(作为函数)。然后，您需要像函数一样调用它，可以选择传递上下文，以便模板可以呈现动态数据。例如this.template() .

3. render方法不会自动调用，因此当您准备好渲染 View 时(通常是立即渲染，但也可能是在 AJAX 响应之后)，您需要调用 this.render() 。对于您的情况，请立即进入 initialize .

4. 终于在 render您可以将渲染的模板附加到 View 的元素:this.$el.html(this.template());

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

我建议您使用此通用渲染流程创建一个 BaseView，这样您就不必每次都重复它。此外，在 BaseView 中设置 subview 的概念也是一个好主意，当父 View remove 时， subview 可以正确清理。被调用，并在父级 render 时重新渲染被调用。

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