Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - render 没有被一个 api 调用，而是被另一个 api 调用

In lại 作者：行者123 更新时间：2023-12-02 14:01:55 27 4
mua khóa gpt4 Nike

我使用下划线模板配置了一个简单的主干模型和 View 。两个单独的 API 使用完全相同的配置。

API 1 按预期工作。

要重现该问题，请注释掉 API 1 的 URL，并取消注释 API 2 的 URL。

正如您所看到的，我已经标准化了两个 api 的响应数据，这两个 api 返回了完全相同的数据结构。但是，不会调用 API 2 的渲染方法。更奇怪的是，在极少数情况下，API 2 确实会调用 render。

我在这里缺少什么？

// Model
var Quote = Backbone.Model.extend({
  // API 1
  //urlRoot: 'http://quotes.stormconsultancy.co.uk/quotes/1.json',
  
  // API 2
  urlRoot: 'http://quotes.rest/qod.json',

  parse: function (data){
    try{
      data = data['contents'].quotes[0];
    }
    catch(e){
    }

    var rd = {author:data.author, quote:data.quote}
    console.log("parsed", typeof rd, rd);
    return rd;
  },
  
  // UPDATE as suggested by cory
  initialize: function() {
    this.on('all', function(eventName) {
      console.log('QuoteModel: ' + eventName);
    });
  }
});

// Xem
var QuoteView = Backbone.View.extend({
  initialize: function() {
    this.template = _.template($('#quote-template').html());
    this.listenTo(this.model, 'change', this.render);
  },

  render: function(){
    console.log("render", this.model.attributes)
    this.$el.html(this.template(this.model.attributes));
  }
});

var quoteM = new Quote();
quoteM.fetch();

$(tài liệu).ready(hàm() {
	var quoteV = new QuoteView({
		el: $('#quote'),
		model: quoteM
	});
});







1 Câu trả lời

您有一个竞争条件，您可以在创建 View 之前获取该条件。

因此，如果在文档准备好之前获取完成，则在 View 开始监听模型之前会触发更改事件。

最简单的解决方案

$(tài liệu).ready(hàm() {
    var quoteM = new Quote();
    var quoteV = new QuoteView({
        el: $('#quote'),
        model: quoteM
    });
    // fetch after
    quoteM.fetch();
});

最佳解决方案

var API_DOMAIN = "http://quotes.rest/";
// Reusable model
var Quote = Backbone.Model.extend({});

// reusable quotes collection
var QuoteCollection = Backbone.Collection.extend({
  model: Quote,
  // simple generic parse
  parse: function(response) {
    return response.contents.quotes;
  },
});

// Xem
var QuoteView = Backbone.View.extend({
  // GOOD: gets called once
  template: _.template($('#quote-template').html()),
  
  initialize: function() {
    // BAD: gets called for every view
    // this.template = _.template($('#quote-template').html());
    
    this.listenTo(this.model, 'change', this.render);
  },

  render: function() {
    console.log("render", this.model.attributes)
    this.$el.html(this.template(this.model.toJSON()));
    // Backbone standard for chaining
    return this;
  }
});


$(hàm() {
  var quoteV,
    collection = new QuoteCollection();
  collection.fetch({
    url: API_DOMAIN + 'qod.json',
    success: function(collection, response, options) {
      // only create the view when you need it
      quoteV = new QuoteView({
        el: $('#quote'),
        model: collection.first()
      });
      
      // manually render to be 100% in control. The event now only
      // serves if the model really changes.
      quoteV.render();
    }
  });

});







关于javascript - render 没有被一个 api 调用，而是被另一个 api 调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40349346/

27 4 0
Bài viết được đề xuất: javascript - 切换按钮时保留滚动位置
Bài viết được đề xuất: java - 以金字塔样式翻转打印数字
Bài viết được đề xuất: java - 创建新的 File 实例是否会导致创建空文件？
Bài viết được đề xuất: javascript - object.Create 返回的对象类型
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com