如何根據其值改變div的文本顏色？

Question

我在動態填充div文本。 我希望文本根據文本的內容改變顏色。

，這裏是我的js -

var BillView = Backbone.View.extend({ 

template:_.template($('#bill-view-template').text()), 

tagname: 'div', 

className: 'billView', 

initialize: function(options){ 
    this.options = options; 
    $('.ViewD').append(this.$el); 

    if($('.vote').val('') === 'Yea' || 'Aye'){ 
     $('.vote').css('color', 'green'); 
    } else if($('.vote').val('') === 'Nay' || 'No'){ 
     $('.vote').css('color', 'red'); 
    } 

    this.render(); 
}, 

render: function(){ 
    this.$el.append(this.template({options: this.model})); 
}, 

}）

<script type="text/template" id="bill-view-template"> 
     <div class='created'><%= options.get('created')%></div> 
     <div class='bill'><%= options.get('vote').question %></div> 
     <div class='vote'><%= options.get('option').value %></div> 
    </script> 

我只是呼籲在一個時間5個對象。無論價值如何，1st 4都會變成綠色。第五名完全沒有改變。

請幫

Answer 1

你有幾個問題：

1. 指定視圖的元素類型的選項tagName，不tagname。您不會注意到這個錯誤，因爲tagName默認爲'div'。我會完全放棄它。
2. $('.vote')在整個DOM中搜索類爲vote的東西，它不會像它可能應該在視圖的el中那樣進行搜索。
3. $(x).val('')指定一個空字符串作爲x的值。
4. 但<div>的沒有價值，所以沒有任何用處。
5. $('.vote').val('') === 'Yea' || 'Aye')因爲
   1. 它解析爲($('.vote').val('') === 'Yea') || 'Aye')總是正確的。
   2. $('.vote').val('') === 'Yea'總是錯誤的，因爲$('.vote').val('')不會返回任何有用的東西。
   3. 因此，整個表達式只是一種複雜且令人困惑的說'Aye'的方式，並且該字符串在布爾上下文中是true。
6. ，你可能尋找的.vote是不是在DOM直到後this.render()被調用。所以整個if是在錯誤的地方。
7. 在Backbone中執行模板功能的常用方法是this.template(this.model.toJSON())，然後在模板中參考<%= created %>。這不是必須的，但堅持常規慣例是一個好主意，以便其他人可以輕鬆理解您的代碼。
8. 通常，調用者將視圖的el添加到DOM，因此$('.ViewD').append(this.$el);通常會在其他地方作爲$('.ViewD').append(view.render().el)。

我上的顏色可能決定內部render這樣的：

render: function() { 
    var data = this.model.toJSON(); 
    data.voteColor = this._voteColor(data.option); 
    this.$el.append(this.template(data)); 
    return this; 
}, 

_voteColor: function(vote) { 
    if(vote === 'Yea' || vote === 'Aye') 
     return 'green'; 
    else if(vote === 'Nay' || vote === 'No') 
     return 'red'; 
    return ''; 
} 

，然後在模板看起來像這樣：

<script type="text/template" id="bill-view-template"> 
    <div class="created"><%= created %></div> 
    <div class="bill"><%= vote %></div> 
    <div class="vote" style="color: <%= voteColor %>"><%= option %></div> 
</script> 

演示：http://jsfiddle.net/ambiguous/BJGF9/1/

你也可以使用：

_colors: { 
    Yea: 'green', 
    Aye: 'green', 
    Nay: 'red', 
    No: 'red' 
}, 

_voteColor: function(vote) { 
    return this._colors[vote] || ''; 
} 

如果您更喜歡查找表if。

演示：http://jsfiddle.net/ambiguous/atF3U/

在這兩種情況下，你不再需要initialize可言。