Question

我正在尝试使用骨干js加载一个html文件并且需要js文件。我能够调用视图的初始化函数但是无法加载那个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并没有免费提供给你很多东西，所以有很多手动步骤可以让它工作：

在使用<div id="todoapp"></div>进行定位时，向index.html添加el: '#todoapp'，但它不存在。
执行template: _.template(statsTemplate)将返回模板的编译版本（作为函数）。然后，您需要像函数一样调用它，可选地传入上下文，以便模板可以呈现动态数据。例如this.template()。
render方法不会自动调用，所以当您准备好渲染视图时（通常是即时但可能是在AJAX响应之后），您需要调用{{1 }}。在你的情况下，直接在this.render()。
最后在initialize中，您可以将呈现的模板附加到视图的元素：render

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

我建议你使用这个常见的渲染流创建一个BaseView，这样你就不必每次都重复它。此外，在BaseView中设置子视图的概念也是一个好主意，子视图的概念在调用父this.$el.html(this.template());时正确清理，并在父母remove时重新渲染{ {1}}被调用。

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

为什么<h1>标签不使用骨干显示？

1 个答案: