单独的颜色代码ToDo单元格，而不仅仅是改变一切

Question

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

<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（这是顺序变量，第一个$(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()); })具有id =“0”，第二个具有id =“1”等等）以便区分它们并使其成为他们每个人都有不同的功能。我还创建了addColorsOptions函数，该函数在使用其唯一ID创建时为每个选择添加选项。

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>

<input type="color">

您还可以看到JSFiddle here。

如有任何问题，请随时发表评论。我希望这有用：）

修改

{{1}}添加了this JSFiddle。

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>