0

我正在动态填充 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 变为绿色。5号完全没有变化。

请帮忙

4

1 回答 1

2

你有几个问题：

  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'，并且该字符串在布尔上下文中为真。
  6. 在调用after.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/

无论哪种情况，您都不再需要 ainitialize了。

于 2013-11-03T02:32:05.783 回答