0

アンダースコアの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()); 
  });
});

助けてくれてありがとう！

4

1 に答える 1

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を再呼び出ししないようにする必要があることに注意してください。

また、jQuery（this.el）の代わりにthis。$elを使用できます。

于 2012-06-04T00:54:01.983 に答える