与服务器端渲染HTML片段骨干模型(Backbone model with server-side

我要开始使用Backbone.js的，以更好地构建我的JavaScript文件。不过，我不希望我的重做应用通过API来输出中只JSON。纠正我，如果我错了，但到目前为止，我有我仍然可以使用Backbone.js的，即使没有JSON API的印象。现在我遇到了在我的服务器返回的HTML和骨干模型不喜欢，并返回一个错误的问题。

基本上，我想加载取决于类别HTML片段：

var Filter = Backbone.Model.extend({
    url: '/filters/',
});
var FilterView = Backbone.View.extend({
    initialize: function() {    
        this.model.on('change', this.updateFilter, this);
        this.changeFilter();
    },

    changeFilter: function() {
        this.model.fetch({data: $.param({category: this.options.category})});
    },

    updateFilter: function(filters) {
        console.log(filters);
        this.$el.html(filters);
    },
});

var filter = new Filter();
var filterView = new FilterView({
    el: $( '#filterContainer' ),
    category: $( '#categorySlug' ).data( 'slug' ),
    model: filter,
});

现在，我认为我可以用这个简单的模型来检索通过Ajax我的HTML代码段。请求正确触发，但骨干返回一个错误， updateFilter永远不会获取调用。

难道我没有得到的东西吗？我需要做什么改变，使其与HTML，而不是一个JSON响应工作？或者不应该使用一个模型呢？

Answer 1:

您需要扩展您的骨干机型覆盖取使得与从应答失去你需要传递一个数据类型为Backbone.Sync

fetch: function(options) {
    return Backbone.Model.prototype.fetch.call(this, _.extend({ dataType: "html"}, options));
}

Answer 2:

这是不是真的那么骨干设计的操作方式，但您可能能够匀内容为示范场（称之为snippet ）通过包括适当的parse模型中的功能：

var Filter = Backbone.Model.extend({
  url: '/filters/',
  parse: function (response) {
    return {
      snippet: $(response)
    }
  }
});

再次，你是一个有点骨气的自然秩序，在此之外，但你现在应该能够使用普通的fetch() get()和set()方法来管理模式的内容。例如，

// in view:
updateFilter: function (filter) {
    this.$el.html(filter.get('snippet'));
},
// etc..

Answer 3:

在我看来，问题是请求的接受头包含application/json作为默认触发错误。您可以通过执行调整的接受头model.fetch({ dataType : 'html'}) 在接受这个问题的答案： Backbone.js的带参数的获取帮我找到了这一点。

Answer 4:

我认为这个问题的答案的问题是，你需要一个与HTML工作，以取代骨干模型的同步方法。下面的代码产生具有在“段”值的数据模型：

sync: function (method, model, options) {
    // NOTE: This generic function won't work for pushing changes
    if (method !== 'read') {
        console.log('Cannot update html model');
        return false;
    }

    // As we're only reading default type to GET - see Backbone.sync
    // for a more generic way of doing this.
    var params = _.extend({ type: 'GET',
        contentType: 'application/xml',
        dataType: 'text'
    });

    var urlError = function () {
        throw new Error('A "url" property or function must be specified');
    };

    // ensure that we have a URL
    if (!params.url) {
        params.url = _.result(model, 'url') || urlError();
    }

    // NOTE: If you extend this function to deal with creates you'll need to ensure
    // params.data is set and make sure that the data isn't processed.
    // See the Backbone.sync methods for more info

    // Finally wrap the backbone success callback to plonk the data in snippet field of an object
    var origSuccess = options.success;
    options.success = function (data, textStatus, xhr) {
        origSuccess({ snippet: data }, textStatus, xhr);
    };

    // Make the request, allowing the user to override any Ajax options.
    var xhr = options.xhr = Backbone.ajax(_.extend(params, options));
    model.trigger('request', model, xhr, options);
    // make the request
    return xhr;
}

标准的骨干阅读功能应该只是工作如下这一点。写作的人会失败，但你总是可以扩展到处理这些功能。