编辑div-knockout.js上的附加文本

Question

使用knockout.js，我正在创建带有按钮点击事件的新div元素。div可以在jquery ui的帮助下进行拖动。我还可以删除创建的div。但是，如何更改已创建div的附加文本？JSFIDDLE

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};
ko.bindingHandlers.droppable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).droppable();
    }
};
var vm=function(){
    var self=this;
    self.items=ko.observableArray();
    self.textContent = ko.observable('');
    self.init=function(){
        self.items(['']);
    }
    self.remove=function(item){
        console.log(item);
        self.items.remove(item);
    }
    self.addNew = function() {
      self.items.push( self.textContent() );
      self.textContent('');
    }
    self.init();
}
ko.applyBindings(new vm());

HTML

<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea>
<button data-bind="click: addNew">Generate New Div</button>
<div data-bind="foreach:items">
    <div href="#" class="item" data-bind="draggable:true,droppable:true">
        <span data-bind="click:$parent.remove">[X]</span><br><br>
        <center><span  data-bind="text:$data"></span></center>
    </div>
</div>

Answer 1

您可以手动执行此操作，方法是向每个<div class="item">添加可编辑元素（例如，<input>），并向<div>文本元素（<span>）添加dblClick事件处理程序，以显示<input>而不是<span>。

要从编辑文本返回到显示文本，可以使用click事件处理程序从可编辑元素返回到纯文本元素（<span>）。

更新的小提琴。

HTML:

<div href="#" class="item" data-bind="draggable:true,droppable:true">
    <span data-bind="click:$parent.remove">[X]</span>
    <br/><br/>
    <center>
        <span class="text" data-bind="text:$data"></span>
        <input class="edit_text"/>
    </center>
</div>

CSS：

.edit_text
{
    display: none;
}

JavaScript:

$(document).on("dblclick", '.text', function()
{
    $(this).hide();
    $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});
$(document).on("click", ".edit_text", function()
{
    return false;
});

$(document).on("click", function()
{
    var editingText = $('.edit_text:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item').find('.text').text($(editingText).val()).show();
    }
});