javascript - 如何在更新集合时更新模板的一部分？

Question

我试图在更新集合时仅更新主干 View 使用的模板的一部分。下面的代码成功执行了 search() 和 render_list() 方法。此外，console.log(html) 显示了完整模板的 html。但是当我执行 replaceWith 时，它会将选择器替换为空。如果我将 $(selector,html) 替换为字符串(即:“test”)，它会成功替换为“test”。

因此，出于某种原因，$(selector, html) 选择器没有按预期执行。更奇怪的是，即使没有将任何更新的 html 插入到文档中，浏览器也会请求更新的 html 选择器中的图像。

define([
    'jquery',
    'underscore',
    'backbone',
    'collections/tracks',
    'collections/genres',
    'text!templates/search_view_title.html',
    'text!templates/search_view.html'
],function($,_,Backbone,Tracks_collection,Genres_collection,Search_view_title_template,Search_view_template){
    var Search_view = Backbone.View.extend({
        el: $('#app'),
        events: {
            'change #genre_select': function(){this.search('genre')},
            'click #search_btn': function(){this.search('search')}
        },
        template: _.template(Search_view_template),
        initialize: function(){
            // SET SOME IMPORTANT LAYOUT SETTINGS
            $('#pagetitle').html(_.template(Search_view_title_template));
            $('body').css('padding-top','124px');

            this.genre_collection = new Genres_collection();
            this.listenTo(this.genre_collection,'update',this.render);
            this.genre_collection.fetch();

            this.collection = new Tracks_collection();
            this.listenTo(this.collection,'update',this.render_list);

        },
        search: function(searchtype){
            switch(searchtype){
                case 'genre':
                    console.log('genre changed');
                    this.collection.fetch({
                        data: {limit: 30, type:'genre',genre_id:$('#genre_select').val()}
                    });
                break;
                case 'search':
                    console.log('search changed');
                    this.collection.fetch({
                        data: {limit: 30, type:'search',keyword:$('#keyword').val()}
                    });
                break;
            }
            console.log(this.collection);

        },
        render_list: function(){
            var that = this;
            console.log('render list');
            var html = that.template({genres: this.genre_collection.models,tracks: this.collection.models});
            console.log(html);
            var selector = '#tracklist';
            console.log($(selector,html));
            that.$el.find(selector).replaceWith($(selector,html));
            return this;
        },
        render: function(){
            // MAKE 'THIS' ACCESSIBLE
            var that = this;
            console.log('render');

            that.$el.find('#container').html(that.template({genres: this.genre_collection.models}));

            return this;
        }
    });

    return Search_view;

});

Answer 1

手头没有 HTML 模板，我只能假设。

这更接近我会怎么做:

var Search_view = Backbone.View.extend({
    el: $('#app'),
    events: {
        'change #genre_select': 'onGenreChange',
        'click #search_btn': 'onSearchClick'
    },
    template: _.template(Search_view_template),
    initialize: function() {
        // SET SOME IMPORTANT LAYOUT SETTINGS
        $('#pagetitle').html(Search_view_title_template);

        // Do this in css
        $('body').css('padding-top', '124px');

        this.genre_collection = new Genres_collection();
        this.genre_collection.fetch();

        this.collection = new Tracks_collection();

        this.listenTo(this.genre_collection, 'update', this.render);
        this.listenTo(this.collection, 'update', this.render_list);

    },

    render: function() {
        console.log('render');

        this.$('#container').html(this.template({
            genres: this.genre_collection.models
        }));

        return this;
    },

    render_list: function() {
        console.log('render list');
        var html = this.template({
            genres: this.genre_collection.models,
            tracks: this.collection.models
        });
        console.log(html);
        var $selector = this.$('#tracklist');
        console.log($selector);
        $selector.replaceWith($(html));
        return this;
    },

    ////////////
    // events //
    ////////////
    onSearchClick: function() {
        console.log('search changed');
        this.collection.fetch({
            data: { limit: 30, type: 'search', keyword: $('#keyword').val() }
        });
    },

    onGenreChange: function() {
        console.log('genre changed');
        this.collection.fetch({
            data: { limit: 30, type: 'genre', genre_id: $('#genre_select').val() }
        });
    },
});

---

$('#pagetitle').html(_.template(Search_view_title_template));

_.template 函数返回一个函数，该函数本身在调用时返回呈现的模板。

它可能会与 this.template 混淆通常包含 _.template 的结果并准备好被调用 ( this.template(data) )。

---

拆分你的回调函数，函数便宜且不必要switch很丑。

我做了你的search进入onGenreChange和 onSearchClick .

---

$('body').css('padding-top','124px');

尽量避免这种情况，它可以很容易地用 CSS 完成，甚至内联 <style>标记或内联 style=""属性。如果您需要它，因为它与动态行为相关，请在 css 文件中创建一个类(例如 search-class)，然后使用 jQuery 切换该类，将“设计”责任移出 js:

$('body').toggleClass('search-class');

---

var that = this;

这仅在处理回调中上下文 (this) 不同的回调时是必需的。在 Backbone 中，大多数时候，它是可以避免的 context选项通常可用并在大多数情况下自动设置(如 events 回调)。

---

this.$el.find(selector)

这相当于this.$(selector) .只是一个小捷径。

---

.replaceWith($(selector,html));

replaceWith 需要一个 htmlString 或 Element 或 Array 或 jQuery。

$(selector, html) 需要一个选择器和一个上下文。你要$(html)将您的 html 字符串转换为 jQuery 元素。