避免與Backbone.js使用document.getElementById

Question

我正在使用Backbone.js做一個應用程序，但我是Backbone.js的新手。我需要更改HTML元素的樣式屬性。有沒有使用Backbone.js中的某些東西來改變HTML元素的樣式？

裏面的index.html我把它隱藏段落：

<input type="text" id="name" placeholder="Enter name"> 
<p id="error_msg_name1" style="display: none;"> 
    Please, enter the name of the configuration. 
</p> 

當有人試圖拯救空「名稱」的模型中，本款應表示，我是這樣處理的：

var nameValue = document.getElementById("name").value; 
if (nameValue == '') { 
    document.getElementById("error_msg_name1").style.display = 'inline'; 
} 

我的導師告訴我，我不應該使用document.getElementById，我應該使用Backbone.js中的某些東西。我搜索了幾天，但我沒有發現任何有用的東西。

這是我的模型：

var Configuration = Backbone.Model.extend({ 

    defaults: function() { 
     return { 
      name: '', 
      description: '', 
      version: '' 
     }; 
    } 

}); 

這裏是查看：

var ConfigurationView = Backbone.View.extend({ 

    events: { 
     'click #ok': 'createConf', 
     'click #cancel': 'cancelConf', 
     'click #preview': 'showJSON', 
     'click #readFile': 'readFile' 
    }, 

    readFile: function() { 
     var files = document.getElementById('fileInput').files; 

     if (!files.length) { 
      alert('Please select a file!'); 
      return; 
     } 

     var file = files[0]; 
     var reader = new FileReader(); 

     reader.onloadend = function(evt) { 
      if (evt.target.readyState == FileReader.DONE) { 
       var fileContent = evt.target.result; 
       document.getElementById('previewFile').textContent = fileContent; 
       importedConfiguration = new Configuration(JSON.parse(fileContent)); 

       $('<div class="col-sm-offset-2 col-sm-10">\ 
         <button type="button" class="btn btn-default btn-sm" id="update">Update</button>').appendTo('#for_button'); 
      } 
     }; 

     reader.readAsBinaryString(file); 
    }, 

    remove: function() { 
     $(this.el).empty().detach(); 
     return this; 
    }, 

    cancelConf: function() { 
     this.render(); 
    }, 

    createConf: function() { 

     document.getElementById("error_msg_name1").style.display = 'none'; 
     document.getElementById("error_msg_name2").style.display = 'none'; 
     document.getElementById("error_msg_description").style.display = 'none'; 
     document.getElementById("error_msg_version").style.display = 'none'; 

     var nameRegex = /^[A-Za-z]+$/; 

     var nameValue = document.getElementById("name").value; 
     var descriptionValue = document.getElementById("description").value; 
     var versionValue = document.getElementById("version").value; 

     if (descriptionValue != '' && versionValue != '' && nameRegex.test(nameValue)) { 
      configuration.set({name: nameValue, description: descriptionValue, version: versionValue}); 

      document.getElementById("for_preview_JSON").innerHTML = JSON.stringify(configuration); 
      document.getElementById("for_preview_JSON").disabled = true; 

      var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(configuration)); 
      $('<a href="data:' + data + '" download="data.json">download JSON</a>').appendTo('#for_download_link_JSON'); 

      document.getElementById("ok").disabled = true; 
      document.getElementById("preview").disabled = true; 
      document.getElementById("name").disabled = true; 
      document.getElementById("description").disabled = true; 
      document.getElementById("version").disabled = true; 
     } 
     else { 
      if (nameValue == '') { 
       document.getElementById("error_msg_name1").style.display = 'inline'; 
      }else if(!nameRegex.test(nameValue)) { 
       document.getElementById("error_msg_name2").style.display = 'inline'; 
      } 

      if (descriptionValue == '') { 
       document.getElementById("error_msg_description").style.display = 'inline'; 
      } 
      if (versionValue == '') { 
       document.getElementById("error_msg_version").style.display = 'inline'; 
      } 
     } 
    }, 

    showJSON: function() { 
     var preview_conf = new Configuration({ 
      name: document.getElementById("name").value, 
      description: document.getElementById("description").value, 
      version: document.getElementById("version").value 
     }); 
     document.getElementById("for_preview_JSON").innerHTML = JSON.stringify(preview_conf); 
     document.getElementById("for_preview_JSON").disabled = true; 
    }, 

    initialize: function(options){ 
     this.template = options.template; 
    }, 

    render: function(){ 
     var content = $(this.template).html(); 
     $(this.el).html(content); 
     return this; 
    } 
}); 

Answer 1

任何源代碼變更前我想你需要了解Bakcbone.View的工作原理以及如何訪問/查詢Ba中的DOM ckbone的方式。

每當您初始化Backbone.View（如您的示例中提及的模板）時，您可以使用this.$el（它是jQuery元素並引用您的模板）訪問您的模板。

對於您的情況，您正在做大量不必要的DOM查詢。而不是僅僅使用this.$el來查找/修改你的模板的HTML。

例子：

var MyView = Backbone.View.extend({ 
    template: _.template($('#your-template-id').html()), 
    events: { 
     "click .something": "doOtherThing" 
    }, 
    doOtherThing: function (e) { 
     // this.$el.find() same as this.$() within view. 
     $myEl = this.$('.innerElement'); // cache element when you need to do a lot of manipulations 
     $myEl.addClass('changed'); // 
     $myEl.toggleClass('opened') // and so on... 
    } 
    render: function() { 
     var template = this.template(this.model.toJSON); 
     this.$el.append(template); 
    } 
}); 

var myView = new MyView(); 
myView.render(); 

---

一些規則，你要記住：

1.不要查詢全球

如果您需要添加/刪除/修改視圖內的HTML元素始終使用this.$el來訪問視圖。

2.緩存常用元素

$myEl = this.$el.find('.innerElement'); 
$myEl.addClass('changed'); 
$myEl.toggleClass('opened'); 
.... 

3.在Bakcbone.Viewthis.$el.find()是相同this.$()

Answer 2

我想補充像這樣將您的文件

// before code 
events: { 
    // other events 
    'click #save': 'saveEntry' 
} 
, saveEntry: function() { 
    if(this.checkEmptyName()) { 
    // do other saving stuff 
    } 
} 
, checkEmptyName: function() { 
    var name = this.$el.find('#name').val(); 
    if(name.length === 0) { 
    this.$el.find('#error_msg_name1').show(); 
    return false; 
    } 
    return true; 
} 
// everything else