Question

使用Django渲染的jinja设置数据属性。当我尝试访问data-url attrib时，该值被分配给类的URL对象。

我对此代码有两个问题。首先，当我尝试访问data-default属性时，它返回null或未定义的值。其次，当我尝试将ajax调用的响应分配给this.data时，它没有被分配。

以下是我的代码

    <select id="value" data-url="api/values" data-default="1">
</select>

$(document).ready(function(){


var value = new function(){
    this.url = $("#value").attr("data-url");
    this.default = $("#value").attr("data-default");
    this.data = null;
    this.settings =   {
      "async": true,
      "crossDomain": true,
      "url": this.url,
      "method": "GET",
    };
    this.getData = function(){
            $.ajax(this.settings).done(function(response){
                   this.data = response;
                 $.each(response, function (i, value) {

                          var $option =  $('<option>').text(value.shift_name)
                            .attr('value', value.id)
                            .attr('start', value.shift_start_time)
                            .attr('end', value.shift_end_time)
                            .attr('shift_day', value.shift_day)

                            if (this.default==value.id){        //Error here this.default is always undefined 
                              $option.attr('selected', 'selected');
                            }

                          $('#value').append($option);

                        });//Loop ends
            });//ajax ends
            }//sub function ends
      } //class ends

value.getData();

});

Answer 1

您有两个不同的范围，因此您需要执行以下操作：

$(document).ready(function(){


var value = new function(){
    this.url = $("#value").attr("data-url");
    this.default = $("#value").attr("data-default");
    this.data = null;
    this.settings =   {
      "async": true,
      "crossDomain": true,
      "url": this.url,
      "method": "GET",
    };
    var outerScope = this;
    this.getData = function(){
            $.ajax(this.settings).done(function(response){
                   outerScope.data = response;
                 $.each(response, function (i, value) {

                          var $option =  $('<option>').text(value.shift_name)
                            .attr('value', value.id)
                            .attr('start', value.shift_start_time)
                            .attr('end', value.shift_end_time)
                            .attr('shift_day', value.shift_day)

                            if (outerScope.default==value.id){        
                              $option.attr('selected', 'selected');
                            }

                          $('#value').append($option);

                        });//Loop ends
            });//ajax ends
            }//sub function ends
      } //class ends

value.getData();

});

Javascript单例类是不是从DOM属性中获取值？

1 个答案: