Question

我有 下划线JS 模板和 jQuery插件，它取决于模板可见后呈现的标记，但问题是当我使用 jQuery 文档时，它不会获得呈现的HTML。

我使用domReady但仍然无法正常工作，我怎么能完成这项工作？这是我到目前为止所得到的：

main.js

requirejs.config({
    baseUrl: 'js/modules',
    shim: {
        // 'jquery.colorize': ['jquery'],
        // 'jquery.scroll': {
        //  deps: ['jquery'],
        //  exports: 'jQuery.fn.colorize'
        // },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            deps: ['jquery'],
            exports: '_'
        }
    },
    paths: {
        'jquery': '../libs/jquery',
        'underscore': '../libs/underscore',
        'backbone': '../libs/backbone',
        'text': '../libs/text',
        'views': '../views',
        'templates': '../../templates',
        'domReady': '../libs/domReady',
        'ui': '../ui'
    }
});

requirejs(['homeView', 'ui/placeholder'], function(Main){
    Main.initialize();
});

homeView.js

define(['jquery', 'underscore', 'backbone', 'text!templates/home.html'], function($, _, Backbone, homeTemplate){
    var HomeView = Backbone.View.extend({
        el: $("#application"),
        events: function(){
            // Empty.
        },
        initialize: function(){
            // Empty.
        },
        render: function(){
            $('body').addClass('pt-dark');
            $(this.el).html(_.template(homeTemplate, {}));
        }
    });

    return new HomeView;
});

UI / placeholder.js

requirejs(['domReady', 'jquery'], function(doc, $){
  doc(function(){
    // Empty should contain the template html at this point.
    console.log($('body').html()); 
  });
});

非常感谢您的帮助！

Answer 1

试试这个：

define(['jquery', 'underscore', 'backbone', 'text!templates/home.html'], function($, _, Backbone, homeTemplate){
    var HomeView = Backbone.View.extend({
        el: $("#application"),
        template: _.template(homeTemplate),
        events: function(){
            // Empty.
        },
        initialize: function(){
            // Empty.
        },
        render: function(){
            $('body').addClass('pt-dark');
            this.$el.html(this.template({})));
            jQuery('#the_thing_you_need', this.$el).theFunctionYouNeed();
        }
    });

    return new HomeView;
});

请注意，您应该为名为“template”的视图定义一个本地属性，或者为了将模板存储在其中，而不是在每次需要时重新调用_.template。

此外，您可以使用此。$ el。

而不是jQuery（this.el）

需要js骨干js jquery模板标记依赖

1 个答案: