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个对象。无论价值如何，前4个都变为绿色。第五名完全没有变化。

请帮忙

Answer 1

你有几个问题：

指定视图元素类型的选项为tagName，而不是tagname。您不会注意到此错误，因为tagName默认为'div'。我完全放弃了。
$('.vote')在整个DOM中搜索vote类的内容，它不会在视图el内搜索它可能应该的样子。
$(x).val('')将空字符串指定为x的值。
但是<div>没有值，所以没有任何用处。
$('.vote').val('') === 'Yea' || 'Aye')总是如此，因为
1. 它被解析为($('.vote').val('') === 'Yea') || 'Aye')。
2. $('.vote').val('') === 'Yea'始终为false，因为$('.vote').val('')不会返回任何有用的内容。
3. 因此，整个表达式只是一种复杂而混乱的说法'Aye'，并且该字符串在布尔上下文中为真。
在调用 .vote之后的之前，您可能正在寻找的this.render()不在DOM中。所以整个if都在错误的位置。

在Backbone中执行模板功能的常用方法是this.template(this.model.toJSON())，然后在模板中引用<%= created %>。这不是必需的，但坚持通常的约定是一个好主意，以便其他人可以轻松理解您的代码。

通常，调用者会将视图的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。

如何根据div的值更改div的文本颜色？

1 个答案: