如何使用 jQuery 部分更新 DOM

Question

我的HTML如下：

<div id="spotPrices">
    <label class="spotLabel">Oil (WTI) $/bbl:</label>
    <INPUT type="text" id="OilSpotPrice" Size=8>
</div>

和我的 JavaScript:

ShowSpotPrices = Backbone.Model.extend({
    defaults: {
        wti: "0.00",
    },

    url: function () {
        return 'http://localhost:4000/api/getSpotPrices';
    },

    initialize: function () {
        console.log("Initialized ShowSpotPrices Model...")
    }
});

ShowSpotPricesView = Backbone.View.extend({
   el: '#spotPrices',
   initialize: function() {
        this.listenTo(this.model, 'sync change', this.render);
        this.model.fetch();
        this.render();
   },

    render : function() {
        //this.$("#OilSpotPrice").html("27.45");
        this.$("#OilSpotPrice").html(this.model.get('wti'));
        return this;
    }
});

var spotPrices = new ShowSpotPrices();
spotPrices.fetch({
    success: function (model) {
        console.log("New spotPrices model fetch: " + model.get('wti'));
    },
    failure: function (model) {
        console.log("Failed to fetch spotPrices model");
    }
});

var spotPricesView = new ShowSpotPricesView({model: spotPrices});
console.log("After spotPricesView.render: " + spotPricesView.model.get('wti'));

我能够使用 API 端点成功获取 wti 值。

但是，我无法使用 jQuery 更新 #OilSpotPrice。我尝试过使用固定字符串值更新和使用 model.get().

Answer 1

使用 .val() jQuery function 设置 #OilSpotPrice 输入的值，而不是其内部 HTML。

this.$("#OilSpotPrice").val(this.model.get('wti'));

此外，您可以在 initialize 方法中限制一次 jQuery find 调用。

initialize: function() {
    // cache the jQuery object of the input once
    this.$oilSpotPrice = this.$("#OilSpotPrice");

    this.listenTo(this.model, 'sync change', this.render);
    this.model.fetch();
    this.render();
},

render : function() {
    // then use the object
    this.$oilSpotPrice.val(this.model.get('wti'));
    return this;
}

如何使用 jQuery 部分更新 DOM

How to partially update the DOM using jQuery

javascript

jquery

backbone.js

backbone-views