0

我正在尝试将我的 HTML 文件移动到 html.erb 文件中，但是在使用 Backbone.js 时遇到了问题。

我最初遇到 <% 和 <%= 标记的问题，因为 Ruby 使用它，但我将 underscore.js 文件更改为

   _.templateSettings = {
    interpolate : /\{\{=(.+?)\}\}/g,
    escape : /\{\{-(.+?)\}\}/g,
    evaluate: /\{\{(.+?)\}\}/g
  };

而不是默认值。现在我不确定为什么我的内容没有出现在 html.erb 文件中。我收到错误消息：Backbone.history 已经启动

这是我的 html.erb 文件：

<%= javascript_include_tag "Lessons.js"%>

   <script type="text/template" id="main-lesson-template">
        <!-- Note: Lesson (lesson name) -->
        <button class="btn btn-danger" style="width: 100%" id="Lesson {{= title }}">{{= title }}</button>
        {{ _.each(sublessons, function(sublesson) { }}
            <button class="btn btn-warning {{= title }}" style="opacity: 0.85; -moz-opacity: 0.85; -webkit-opacity: 0.85; list-style: none; width: 100%; display: none;">{{= sublesson.title }}</button>
        {{ }); }}
    </script>

    <script type="application/javascript">
        jQuery(function(){
            window.library.fetch();
        });
    </script>



    <script type="text/template" id="library-template">
        <div id="left-container" style="float: left; left: -170px">
            <ul class="lessons" style="width: 180px; padding-left: 0px;"></ul>
        </div>
        <script>
            $('#left-container').css('position', 'relative').mouseover(function() {
                $(this).stop(true).animate({'left': '0px'}, 1000);
            }).mouseout(function() {
                $(this).stop(true).animate({'left': '-170px'}, 1000);
            });
        </script>
    </script>


<%= javascript_include_tag "Lessons.js"%>

会不会是我的 javascript 文件：

window.Lessons = Backbone.Collection.extend({
    model: Lesson,
    url: './lessons.json'
});

window.library = new Lessons();

$(document).ready(function() {

    window.LessonView = Backbone.View.extend({
        tagName: 'div',
        className: 'lesson',
        template:  _.template($('#main-lesson-template').html()),


    initialize: function() {
        _.bindAll(this,'render');
    },

    render: function() {
        var renderedContent = this.template(this.model.toJSON());
        $(this.el).html(renderedContent);
        return this;
    }
});

window.SubLessonView = Backbone.View.extend({
    tagName: 'div',
    className: 'sub-lesson',
    template: _.template($('#main-lesson-template').html()),

    initialize: function() {
        _bindAll(this, 'render');
    },

    render: function() {
        var renderedContent = this.template(this.model.toJSON());
        $(this.el).html(renderedContent);
        return this;        
    }
});

window.LibraryView = Backbone.View.extend({

    tagName: 'section',
    template: _.template($('#library-template').html()),

    events: {
        'click .btn.btn-danger': 'showSubLessons',
        'click .btn.btn-warning': 'showLessonContent'
    },

    initialize: function() {
        _.bindAll(this, 'render',
            'showSubLessons');
        this.collection.bind('reset', this.render);
    },

    render: function() {
        var $lessons
        collection = this.collection;
        $(this.el).html(this.template({}));
        $lessons = this.$('.lessons');
        this.collection.each(function(lesson) {
            var view = new LessonView({
                model: lesson,
                collection: collection
            });
            $lessons.append(view.render().el);

            //Add all content to the content container
            for(var i = 0; i < view.model.attributes.sublessons.length; ++i) {
                $('#content').append("<div id='" + view.model.attributes.sublessons[i].title + " Content' style='display: none'>" + view.model.attributes.sublessons[i].text + "</div>");
            }
        });

        var $container = $('#container');
        $container.append(this.el);
    },

还有我的路由器：

window.BackboneLessons = Backbone.Router.extend({
            routes: {
                '':'home'

        },

        initialize: function() {
            this.libraryView = new LibraryView({
                collection: window.library
            });
        },

        home: function(){
            this.libraryView.render();
        }
    });

    window.App = new BackboneLessons();
    Backbone.history.start(); //offending line
});
4

1 回答 1

0

我已经将我的 jsavascript 文件链接了两次，这就是 Backbone.history.start 被调用两次的原因。

于 2013-10-15T14:38:56.313 回答