单独对 ToDo 单元格进行颜色编码，而不仅仅是更改所有内容

Question

我已经创建了一个基本的待办事项列表。我想添加颜色代码选项，类似于 Google Keep（这是一个练习）。正如您在我的jsfiddle 中看到的那样，我尝试简单地放入一个 HTML 选择，但这会改变整个部分的背景。

<p display="none">
  <section class="main" style="display: block;" >
    <div data-bind="visible:todos().length>0">
      <input id="toggle-all" type="checkbox" data-bind="checked:markAll"/>
      <label for="toggle-all">Mark all as complete</label>
      <br /><br />
      <select id="colorOptions" id="toggle-all"></select>
    </div>
    <ul id="mycell" class="todo-list" data-bind="template:{ name:'item-template',foreach: todos}">
    </ul>
  </section>
</p>

问题：如何添加选项以单独对待办事项进行颜色编码？

Answer 1

好的，我是使用模板完成的。首先，我在 li 中添加了模板内颜色的选择，以便每个条目都有一个选择。然后我为每个选择添加了一个 id（这是 order 变量，第一个 <select> 有 id="0" 第二个有 id="1" 等等），以便区分它们并使每个它们在变化时具有不同的功能。我还创建了 addColorsOptions 函数，该函数在使用其唯一 ID 创建每个选择时添加选项。

$(function(){
    var Todo = function(id, title, done, order,callback) {
        var self = this;
        self.id = ko.observable(id);
        self.title = ko.observable(title);
        self.done = ko.observable(done);
        self.order = order;
        self.updateCallback = ko.computed(function(){
            callback(self);
            return true;
        });        
    }
    
    var viewModel = function(){
        var self = this;
        self.todos =  ko.observableArray([]);
        self.inputTitle = ko.observable("");
        self.doneTodos = ko.observable(0);
        self.markAll = ko.observable(false);

        self.addOne = function() {
           var order = self.todos().length;
           var t = new Todo(order, self.inputTitle(),false,order,self.countUpdate);
           self.todos.push(t);           
           self.addColorsOptions(order);
        };
        
        self.createOnEnter = function(item,event){
            if (event.keyCode == 13 && self.inputTitle()){
                self.addOne();
                self.inputTitle("");
            }else{
                return true;
            };           
        }
        
        self.toggleEditMode = function(item,event){
            $(event.target).closest('li').toggleClass('editing');
        }
        
        self.editOnEnter = function(item,event){
            if (event.keyCode == 13 && item.title){
                item.updateCallback();
                self.toggleEditMode(item,event);
            }else{
                return true;
            };           
        }

        self.markAll.subscribe(function(newValue){
            ko.utils.arrayForEach(self.todos(), function(item) {
                return item.done(newValue);
            });        
        });

        self.countUpdate = function(item){
            var doneArray = ko.utils.arrayFilter(self.todos(), function(it) {
                return it.done();
            });
            self.doneTodos(doneArray.length);
            return true;
        };
        
        self.countDoneText = function(bool){
            var cntAll = self.todos().length;
            var cnt  = (bool ? self.doneTodos() : cntAll - self.doneTodos());
            var text = "<span class='count'>" + cnt.toString() + "</span>";
            text += (bool ? " completed" : " remaining");
            text += (self.doneTodos() > 1 ? " items" : " item");
            return text;
        }
        
        self.clear = function(){
            self.todos.remove(function(item){ return item.done(); });
        }
        
        
        self.addColorsOptions = function(id){
            
            var colors = [{
        display: "light yellow",
        value: "ffffcc"        
    }, {
        display: "light blue",
        value: "ccffff"
    }, {
        display: "light green",
        value: "ccffcc"
    }, {
        display: "gray",
        value: "cccccc"
    }, {
        display: "white",
        value: "ffffff"
    }];
    
    var options = ['<option value="">Select color</option>'];
    
    for(var i = 0; i < colors.length; i++){
       options.push('<option value="');
       options.push(colors[i].value);
       options.push('">');
       options.push(colors[i].display);
       options.push('</option>');       
    }
    
    $("#" + id).html(options.join('')).change(function(){
        var val = $(this).val();
        if(val){
        $("#" + id).closest('li').css('backgroundColor', '#' + val);
        }
    });
            
            
        }
        
        
     };
    
    ko.applyBindings(new viewModel()); 

})

body {
	font-size: 14px;
	 background-color: #3c6dc5;
	color: #333333;
	width: 520px;
	margin: 0 auto;
}

#todoapp {
	 background-color: #3c6dc4;
	padding: 20px;
	margin-bottom: 40px;
}

#todoapp h1 {
	font-size: 36px;
	text-align: center;
  color:white;
}

#todoapp input[type="text"] {
	width: 466px;
	font-size: 24px;
	line-height: 1.4em;
	padding: 6px;
  color:#000033;
}

.main {
	display: none;
}

.todo-list {
	margin: 10px 0;
	padding: 0;
	list-style: none;
  color: #E0E0EF;
}


.todo-list li {
	padding: 18px 20px 18px 0;
	position: relative;
	font-size: 24px;
	border-bottom: 1px solid #cccccc;
}

.todo-list li:last-child {
	border-bottom: none;
}

.todo-list li .edit {
    display: none;
}
.todo-list li.editing {
	border-bottom: 1px solid #778899;
}

.todo-list li.editing .view {
	display: none;
}
.todo-list li.editing .edit {
	display: block;
	width: 444px;
	padding: 13px 15px 14px 20px;
	margin: 0;
}

.todo-list li.done label {
    color: #777777;
    text-decoration: line-through;
}


.todo-list .destroy {
	position: absolute;
	right: 5px;
	top: 20px;
	display: none;
	cursor: pointer;
	width: 20px;
	height: 20px;
}

#todoapp footer {
	display: none;
	margin: 0 -20px -20px -20px;
	overflow: hidden;
	color: #555555;
	background: #f4fce8;
	border-top: 1px solid #ededed;
	padding: 0 20px;
	line-height: 37px;
}

.todo-count {
    float:left;    
}

.todo-count .count{
    font-weight:bold;    
}

#clear-completed {
	float: right;
	line-height: 20px;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.1);
	color: #555555;
	font-size: 11px;
	margin-top: 8px;
	margin-bottom: 8px;
	padding: 0 10px 1px;
	cursor: pointer;
}
label{color:white;}

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="todoapp">
    <header>
      <h1>Fun To Do!</h1>
      <input id="new-todo" type="text" placeholder="Finish Homework..." data-bind="value:inputTitle,event: { keyup: createOnEnter}"/>
    </header>

    <section class="main" style="display: block;" >
   
      <div data-bind="visible:todos().length>0">
      
      <input id="toggle-all" type="checkbox" data-bind="checked:markAll"/>
          <label for="toggle-all">Mark all as complete</label> <br /><br />
      </div>
      <ul id="mycell" class="todo-list" data-bind="template:{ name:'item-template',foreach: todos}">
      </ul>
    </section>
    
    <footer style="display: block;">
      <div data-bind="visible:todos().length>0">
        <div class="todo-count"><b data-bind="text:todos().length"></b> items left</div>
        <!-- ko if: doneTodos() > 0 -->
          <a id="clear-completed" data-bind="click:clear">
              Clear <span data-bind="html:countDoneText(true)"></span>.
          </a>
        <!-- /ko -->
        <br style="clear:both"/>
      </div>
    </footer>
</div>
          
<script type="text/template" id="item-template">
    <li data-bind="event:{ dblclick :$root.toggleEditMode},css : {done:done() }">
        <div class="view" >
          <input class="toggle" type="checkbox" data-bind="checked:done"/>
          <label data-bind="text:title"></label>
          <a class="destroy"></a>
        </div>
        <input class="edit" type="text" data-bind="value:title,event: { keyup: $root.editOnEnter}" />
        <select data-bind="attr: {'id': id}"></select>
    </li>
</script>

您还可以查看 JSFiddle here。

如有任何问题，请随时发表评论。我希望这会有所帮助:)

编辑

请参阅 this JSFiddle 以了解 <input type="color"> 添加。

Answer 2

我测试了你的小提琴代码。有一些不需要的代码（我没有找到）会淡出您的div databind="....。所以要消除这个问题，你可以在 jquery 代码的末尾添加这个 }); 之前看到这样的东西：

   $('div').show(); //adding code
});

现在选择起作用了，您可以在页面检查器中看到更改，但是您在此处看不到，因为您的 ul 为空。要使用静态数据 ul 查看结果更改 ul，如下所示：

<ul id="mycell" class="todo-list">
   <li>first</li>
   <li>second</li>
</ul>