Question

使用knockout.js我正在使用按钮单击事件创建新的div元素。在jquery ui的帮助下，div可以拖拽。我也能删除创建的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

您可以通过向每个<input>添加可编辑元素（例如<div class="item">）并将dblClick事件处理程序添加到<div>文本元素（{{1 }}）显示<span>而不是<input>。

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

Updated fiddle

HTML：

<span>

CSS：

<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>

JavaScript的：

.edit_text
{
    display: none;
}

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

1 个答案: